/* DRIVER PAL — Estilos (sistema de design DRIVER PAL)
   Tokens nos dois temas; o app segue o tema do aparelho.
   Fontes vêm junto com o app (decisão: funcionar sem internet). */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(../fontes/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(../fontes/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(../fontes/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(../fontes/bricolage-grotesque-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(../fontes/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --fundo: #F4F1EA; --superficie: #FFFFFF; --superficie-afundada: #EDE7DA;
  --linha: #D9D3C4; --borda-campo: #8F887A;
  /* Sob o seletor claro (v0.13.0): medidor e nível com as cores do tema claro também no escuro (não mudam no escuro). */
  --nota-pessima: #8E2448; --nota-ruim: #A8455F; --nota-pessima-suave: #F5DEE5; --nota-ruim-suave: #F8E8ED; --sobre-nota: #FFFFFF;
  --medidor-vazio: var(--borda-campo); --medidor-vazio-op: 0.55;
  --sob-seletor-nota-pessima: #8E2448; --sob-seletor-nota-ruim: #A8455F;
  --sob-seletor-verde: #1B5E43; --sob-seletor-terroso: #9A4A0B; --sob-seletor-tinta: #1B1B18; --sob-seletor-suave: #5C5A52; --sob-seletor-borda: #8F887A;
  --tinta: #1B1B18; --tinta-suave: #5C5A52;
  --verde: #1B5E43; --verde-profundo: #144732; --verde-suave: #E3EEE7;
  --faixa: #1B5E43; --faixa-profunda: #144732; --sobre-faixa: #FFFFFF;
  --sobre-verde: #FFFFFF; --sobre-verde-suave: #C9DDD2;
  --terroso: #9A4A0B; --terroso-suave: #F4E3D2; --sobre-terroso: #FFFFFF; --veu: rgba(27, 27, 24, 0.48);
  --positivo: var(--verde); --custo: var(--terroso); --foco: var(--tinta);
  --sombra-cartao: 0 1px 2px rgba(27, 27, 24, 0.06), 0 2px 8px rgba(27, 27, 24, 0.05);
  --sombra-destaque: 0 4px 16px rgba(20, 71, 50, 0.14);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-texto: Figtree, system-ui, sans-serif;
  --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 20px; --espaco-6: 24px; --espaco-8: 32px;
  --raio-campo: 12px; --raio-cartao: 16px; --raio-destaque: 20px; --raio-pilula: 999px;
  --alvo-minimo: 44px; --altura-campo: 48px; --altura-botao: 56px;
  --dp-barra-mola: cubic-bezier(0.32, 1.25, 0.5, 1); /* encolher e voltar da barra de abas, 380 ms */
  --altura-nav: 76px; /* espaço da barra de abas a partir do pé: 12 de folga + 64 da barra (v0.8) */
}
/* Tema: Automático segue o celular; data-theme força Claro ou Escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    color-scheme: dark;
    --fundo: #171613; --superficie: #22211D; --superficie-afundada: #2C2A25;
    --linha: #3A3731; --borda-campo: #7A7466;
    --tinta: #F2EEE6; --tinta-suave: #B5AFA2;
    --verde: #5FBF8F; --verde-profundo: #4AA87A; --verde-suave: #1E3A2D;
    --faixa: #173F2E; --faixa-profunda: #0F2E21; --sobre-faixa: #F2EEE6;
    --sobre-verde: #0F1A14; --sobre-verde-suave: #A9C9B8;
    --terroso: #E39A5B; --terroso-suave: #3D2A1B; --sobre-terroso: #1A0F08; --veu: rgba(0, 0, 0, 0.6);
  --nota-pessima: #F08AA8; --nota-ruim: #D9A3B4; --nota-pessima-suave: #4A1F2E; --nota-ruim-suave: #3A2730; --sobre-nota: #2A0E18;
  --medidor-vazio: #857F72; --medidor-vazio-op: 1;
    --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sombra-destaque: 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="escuro"] {
  color-scheme: dark;
  --fundo: #171613; --superficie: #22211D; --superficie-afundada: #2C2A25;
  --linha: #3A3731; --borda-campo: #7A7466;
  --tinta: #F2EEE6; --tinta-suave: #B5AFA2;
  --verde: #5FBF8F; --verde-profundo: #4AA87A; --verde-suave: #1E3A2D;
  --faixa: #173F2E; --faixa-profunda: #0F2E21; --sobre-faixa: #F2EEE6;
  --sobre-verde: #0F1A14; --sobre-verde-suave: #A9C9B8;
  --terroso: #E39A5B; --terroso-suave: #3D2A1B; --sobre-terroso: #1A0F08; --veu: rgba(0, 0, 0, 0.6);
  --nota-pessima: #F08AA8; --nota-ruim: #D9A3B4; --nota-pessima-suave: #4A1F2E; --nota-ruim-suave: #3A2730; --sobre-nota: #2A0E18;
  --medidor-vazio: #857F72; --medidor-vazio-op: 1;
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-destaque: 0 4px 16px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
/* Elemento com o atributo hidden fica escondido mesmo quando a classe dele define display. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-texto); background: var(--fundo); color: var(--tinta); -webkit-font-smoothing: antialiased; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: var(--verde); }

/* fim da rolagem com espaço livre para o último item não ficar atrás da barra: 12 + 64 + 16 = 92 px */
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(var(--altura-nav) + 16px + env(safe-area-inset-bottom)); }
body.sem-nav #app { padding-bottom: calc(var(--espaco-8) + env(safe-area-inset-bottom)); }
.conteudo { padding: var(--espaco-4) var(--espaco-5) 0; display: flex; flex-direction: column; gap: var(--espaco-3); }
.conteudo.sobe { margin-top: -24px; padding-top: 0; }
.titulo-secao { margin: var(--espaco-3) 0 0; font: 600 20px/26px var(--font-display); }
.corpo { font: 400 15px/22px var(--font-texto); }

/* Básicos */
.dp-icone { flex-shrink: 0; display: block; }
.dp-rotulo { font: 500 14px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-legenda { margin: 0; font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-valor-destaque { font: 700 44px/48px var(--font-display); letter-spacing: -0.01em; }
.dp-valor-cartao { font: 700 24px/30px var(--font-display); }
.dp-custo { color: var(--custo); }
.dp-positivo { color: var(--positivo); }
.aviso-custo { color: var(--terroso); font-weight: 600; }
:where(.dp-botao, .dp-seletor, .dp-segmento, .dp-topo-voltar, .item):focus-visible,
.dp-marcador-input:focus-visible + .dp-marcador-caixa { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-topo :focus-visible { outline-color: var(--sobre-faixa); }

/* Botão */
.dp-botao { display: flex; align-items: center; justify-content: center; gap: var(--espaco-2); width: 100%; height: var(--altura-botao); padding: 0 var(--espaco-5); border-radius: var(--raio-cartao); font: 600 18px/24px var(--font-texto); cursor: pointer; flex-shrink: 0; text-decoration: none; }
.dp-botao-primario { background: var(--verde); color: var(--sobre-verde); border: 0; }
.dp-botao-primario:active { background: var(--verde-profundo); }
.dp-botao-secundario { background: var(--superficie); color: var(--verde); border: 2px solid var(--verde); }
.dp-botao-secundario:active { background: var(--verde-suave); }
.dp-botao-texto { background: transparent; color: var(--verde); border: 0; height: var(--alvo-minimo); font-size: 16px; }
.dp-botao-apagar { background: transparent; color: var(--terroso); border: 0; height: var(--alvo-minimo); font-size: 16px; }

/* Seletor (pílula) */
.dp-seletor { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo-minimo); padding: 0 12px 0 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta); font: 500 15px/20px var(--font-texto); cursor: pointer; }
.dp-seletor-sobre-verde { background: var(--faixa-profunda); border-color: var(--sobre-verde-suave); color: var(--sobre-faixa); }

/* Campo */
.dp-campo { display: flex; flex-direction: column; gap: var(--espaco-1); min-width: 0; position: relative; }
.dp-campo-rotulo { font: 500 14px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-campo-caixa { display: flex; align-items: center; gap: 10px; height: var(--altura-campo); padding: 0 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); background: var(--superficie); color: var(--tinta-suave); }
.dp-campo-caixa:focus-within { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.dp-campo-input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font: 500 17px/24px var(--font-texto); color: var(--tinta); outline: none; }
.dp-campo-input::placeholder { color: var(--tinta-suave); opacity: 1; font-weight: 400; }
.dp-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3); }

/* Segmentado */
.dp-segmentado { display: flex; gap: var(--espaco-2); }
.dp-segmento { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--altura-campo); border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); background: var(--superficie); color: var(--tinta); font: 500 16px/20px var(--font-texto); cursor: pointer; }
.dp-segmento[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); font-weight: 600; }

/* Marcador */
.dp-marcador { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--altura-campo); padding: 0 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); background: var(--superficie); font: 500 17px/24px var(--font-texto); color: var(--tinta); cursor: pointer; }
.dp-marcador-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dp-marcador-caixa { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--borda-campo); border-radius: 6px; color: transparent; }
.dp-marcador-input:checked + .dp-marcador-caixa { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }

/* Selo */
.dp-selo { display: inline-block; margin-left: var(--espaco-2); padding: 1px 8px; border-radius: var(--raio-pilula); font: 600 12px/18px var(--font-texto); vertical-align: 1px; background: var(--terroso-suave); color: var(--terroso); }

/* Faixa verde do topo */
.dp-topo { background: var(--faixa); color: var(--sobre-faixa); padding: calc(var(--espaco-3) + env(safe-area-inset-top)) var(--espaco-5) var(--espaco-8); }
.dp-topo.curto { padding-bottom: var(--espaco-5); }
.dp-topo-barra { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-minimo); margin-bottom: var(--espaco-3); }
.dp-topo-voltar { display: flex; align-items: center; justify-content: center; width: var(--alvo-minimo); height: var(--alvo-minimo); margin-left: -10px; color: var(--sobre-faixa); border-radius: var(--raio-pilula); border: 0; background: transparent; }
.dp-topo-acoes { display: flex; gap: var(--espaco-2); margin-left: auto; align-items: center; }
.dp-topo-sobretitulo { font: 500 15px/20px var(--font-texto); color: var(--sobre-verde-suave); }
.dp-topo-titulo { margin: 0; font: 700 28px/34px var(--font-display); color: var(--sobre-faixa); }
.dp-topo-titulo:focus { outline: none; } /* recebe o foco ao trocar de tela (leitor de tela), sem moldura */

/* Cartões */
.dp-cartao { background: var(--superficie); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: var(--espaco-4); }
.dp-cartao-destaque { border-radius: var(--raio-destaque); box-shadow: var(--sombra-destaque); padding: var(--espaco-5); }
.dp-icone-fundo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raio-pilula); background: var(--verde-suave); color: var(--verde); }
.dp-icone-fundo-custo { background: var(--terroso-suave); color: var(--terroso); }
.dp-custofixo { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.dp-custofixo-cabeca { display: flex; align-items: center; gap: 10px; }
.dp-custofixo-pe { display: flex; justify-content: space-between; gap: var(--espaco-2); font: 500 14px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-custofixo-pe .dp-positivo { font-weight: 600; }
.dp-progresso { height: 12px; border-radius: var(--raio-pilula); background: var(--terroso-suave); overflow: hidden; }
.dp-progresso-preenchido { height: 100%; border-radius: var(--raio-pilula); background: var(--verde); min-width: 12px; transition: width .4s; }
.dp-progresso[aria-valuenow="0"] .dp-progresso-preenchido { min-width: 0; }
.dp-metrica { display: flex; flex-direction: column; gap: 6px; }
.dp-metrica .dp-icone-fundo { margin-bottom: 4px; }

/* Extrato */
.dp-extrato-lista { margin: 0; display: flex; flex-direction: column; }
.dp-extrato-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); padding: 8px 0; font: 400 15px/22px var(--font-texto); }
.dp-extrato-linha dt { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dp-extrato-linha dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-extrato-sinal { color: var(--terroso); font-weight: 600; width: 10px; }
.dp-extrato-subtotal { border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 12px; font: 700 18px/24px var(--font-display); }
.dp-extrato-subtotal dd { font-weight: 700; }
.dp-extrato-total { border-top: 2px solid var(--tinta); margin-top: 4px; padding-top: 12px; font: 700 24px/30px var(--font-display); }
.dp-extrato-total dd { font-weight: 700; }
.dp-extrato-compacto { box-shadow: none; }
.dp-extrato-compacto .dp-extrato-linha { padding: 4px 0; }
.dp-extrato .dp-legenda { margin-top: 6px; }

/* Listas (histórico, custos) */
.lista { display: flex; flex-direction: column; gap: var(--espaco-2); }
.item { display: flex; align-items: center; gap: var(--espaco-3); background: var(--superficie); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 12px var(--espaco-4); min-height: 64px; text-decoration: none; color: inherit; }
.item .meio { flex: 1; min-width: 0; }
.item .titulo { font: 600 16px/22px var(--font-texto); }
.item .detalhe { font: 400 14px/20px var(--font-texto); color: var(--tinta-suave); }
.item .direita { text-align: right; font: 700 17px/22px var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item .direita .detalhe { font-family: var(--font-texto); font-weight: 400; font-size: 13px; }
.vazio { text-align: center; color: var(--tinta-suave); font: 400 15px/22px var(--font-texto); }


/* Erros de formulário */
.erros { background: var(--terroso-suave); color: var(--terroso); border-radius: var(--raio-campo); padding: 12px 14px; font: 500 15px/22px var(--font-texto); }
.erros ul { margin: 4px 0 0; padding-left: 20px; }
/* Campo com erro (v0.12.0, ComErro do sistema de design v92): borda terrosa de 2 px, ícone no rótulo,
   mensagem embaixo e o halo que pulsa duas vezes no primeiro campo (parado com reduzir movimento) */
.dp-com-erro { scroll-margin: 96px 0; }
.dp-com-erro .dp-campo-caixa, .dp-com-erro .dp-regua-caixa { border: 2px solid var(--terroso); box-shadow: none; }
.dp-com-erro .dp-campo-caixa:focus-within { border-color: var(--terroso); box-shadow: 0 0 0 1px var(--terroso); }
.dp-com-erro > .dp-campo-rotulo { color: var(--terroso); font-weight: 600; }
.dp-erro-icone { display: inline-block; margin: 0 5px 0 0; vertical-align: -3px; }
.dp-erro-msg { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--terroso); font: 600 14px/19px var(--font-texto); }
.dp-erro-msg .dp-icone { flex: none; margin-top: 1px; }
.dp-realce .dp-campo-caixa, .dp-realce .dp-regua-caixa { animation: dp-realce 900ms ease-out 2; }
@keyframes dp-realce { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--terroso) 55%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--terroso) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dp-realce .dp-campo-caixa, .dp-realce .dp-regua-caixa { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--terroso) 25%, transparent); } }

/* Busca de cidade */

/* Navegação inferior */
/* Barra de abas: a barra flutua por cima do conteúdo; as regras dela estão em "Barra de abas líquida" (v0.8). */
.dp-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-width: 520px; height: 0; margin: 0 auto; }
body.sem-nav .dp-nav { display: none; }

/* Aviso rápido */
.aviso-rapido { position: fixed; left: 50%; bottom: calc(var(--altura-nav) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; background: var(--tinta); color: var(--fundo); padding: 12px 18px; border-radius: var(--raio-campo); font: 500 15px/20px var(--font-texto); max-width: calc(100% - 40px); }
body.sem-nav .aviso-rapido { bottom: calc(16px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Botão de ícone (engrenagem na faixa) */
.dp-botao-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-minimo); height: var(--alvo-minimo); border: 1.5px solid var(--borda-campo); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta); cursor: pointer; flex-shrink: 0; }
.dp-botao-icone-sobre-verde { background: var(--faixa-profunda); border-color: var(--sobre-verde-suave); color: var(--sobre-faixa); }
.dp-botao-icone:focus-visible, .dp-item-toque:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Lista e item de lista */
.dp-lista-bloco { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.dp-lista-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); margin: 0; font: 600 14px/18px var(--font-texto); color: var(--tinta-suave); text-decoration: none; }
a.dp-lista-titulo { min-height: 32px; align-items: center; }
.dp-lista-complemento { font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-lista { background: var(--superficie); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); overflow: hidden; }
.dp-lista-nota { margin: 0; }
.dp-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; width: 100%; color: var(--tinta); text-decoration: none; border: 0; border-top: 1px solid var(--linha); background: transparent; text-align: left; }
.dp-item:first-child { border-top: 0; }
.dp-item-toque { cursor: pointer; }
.dp-item-toque:active { background: var(--superficie-afundada); }
.dp-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-item-titulo { font: 600 16px/22px var(--font-texto); }
.dp-item-detalhe { font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-item-valor { font: 600 16px/22px var(--font-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-item-seta { color: var(--tinta-suave); margin-right: -6px; }
.dp-item-suave .dp-item-titulo { color: var(--tinta-suave); font-weight: 500; }
.dp-item-selecionado { background: var(--verde-suave); }
.dp-item-selecionado .dp-item-titulo { color: var(--verde); }
.dp-item-check { color: var(--verde); }

/* Seletor com lista nativa por cima (mês, veículo) */
.seletor-nativo { position: relative; }
.seletor-nativo select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 16px; }

a.dp-seletor, a.dp-segmento, a.dp-botao, a.dp-botao-icone, a.dp-item, a.dp-lista-titulo { text-decoration: none; }

/* ---------- Componentes da v0.3 (copiados do sistema de design) ---------- */
/* Extrato: comparação com o período anterior */
.dp-extrato-linha dd { display: flex; flex-direction: column; align-items: flex-end; }
.dp-extrato-comp { font: 500 12px/16px var(--font-texto); color: var(--tinta-suave); }

/* Distância (km) */
.dp-dist { display: flex; flex-direction: column; gap: 2px; }
.dp-dist-valor { align-self: center; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: var(--alvo-minimo); border: 0; background: transparent; color: var(--tinta); cursor: text; padding: 0 12px; }
.dp-dist-numero { font: 700 36px/40px var(--font-display); font-variant-numeric: tabular-nums; border-bottom: 2px dashed var(--borda-campo); }
.dp-dist-unidade { font: 500 16px/20px var(--font-texto); color: var(--tinta-suave); }
.dp-dist-digitar { align-self: center; width: 140px; height: var(--altura-campo); box-sizing: border-box; text-align: center; border: 1.5px solid var(--verde); border-radius: var(--raio-campo); background: var(--superficie); color: var(--tinta); font: 700 28px/32px var(--font-display); outline: none; }
.dp-dist-pista { --dp-dist-mola: cubic-bezier(0.3, 1.35, 0.5, 1); position: relative; height: 80px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dp-dist-barra { position: absolute; top: 52px; height: 8px; transform: translateY(-50%); border-radius: var(--raio-pilula); background: linear-gradient(90deg, var(--verde) 0%, var(--borda-campo) 50%, var(--terroso) 100%); cursor: pointer; transition: left 200ms ease-out, width 200ms ease-out, height 200ms ease-out; }
.dp-dist-ativo .dp-dist-barra { height: 16px; transition: left 260ms var(--dp-dist-mola), width 260ms var(--dp-dist-mola), height 260ms var(--dp-dist-mola); }
.dp-dist-bolinha { position: absolute; top: 52px; width: 24px; height: 24px; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; background: var(--superficie); border: 3px solid var(--tinta); box-shadow: var(--sombra-cartao); cursor: grab; transition: left 200ms ease-out, transform 200ms ease-out; }
.dp-dist-ativo .dp-dist-bolinha { transform: translate(-50%, -50%) scale(1.3); transition: left 260ms var(--dp-dist-mola), transform 260ms var(--dp-dist-mola); }
.dp-dist-arrastando .dp-dist-bolinha { transition: transform 260ms var(--dp-dist-mola); cursor: grabbing; }
.dp-dist-bolinha:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.dp-dist-passo { position: absolute; top: 52px; width: var(--alvo-minimo); height: var(--alvo-minimo); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: left 200ms ease-out; }
.dp-dist-passo .dp-icone { stroke-width: 2.75; transform: scale(0.85); transition: transform 200ms ease-out; }
.dp-dist-ativo .dp-dist-passo { transition: left 260ms var(--dp-dist-mola); }
.dp-dist-ativo .dp-dist-passo .dp-icone { transform: scale(1.2); transition: transform 260ms var(--dp-dist-mola); }
.dp-dist-passo:active .dp-icone { transform: scale(1.05); }
.dp-dist-passo:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.dp-dist-menos { color: var(--verde); }
.dp-dist-mais { color: var(--terroso); }
.dp-dist-balao { position: absolute; top: 0; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: var(--tinta); color: var(--fundo); font: 600 15px/20px var(--font-texto); white-space: nowrap; pointer-events: none; animation: dp-dist-surge 160ms ease-out; }
.dp-dist-balao::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tinta); }
.dp-dist-arrastando .dp-dist-balao { transition: none; }
.dp-dist-marca { position: absolute; top: 64px; transform: translateX(-50%); font: 500 12px/16px var(--font-texto); color: var(--tinta-suave); white-space: nowrap; pointer-events: none; transition: left 200ms ease-out; }
.dp-dist-marca-fim { transform: translateX(-100%); }
.dp-dist-marca:not(.dp-dist-marca-fim) { transform: none; }
.dp-dist-ativo .dp-dist-marca { transition: left 260ms var(--dp-dist-mola); }
@keyframes dp-dist-surge { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dp-dist-barra, .dp-dist-bolinha, .dp-dist-passo, .dp-dist-passo .dp-icone, .dp-dist-marca, .dp-dist-balao { transition: none !important; animation: none !important; } }

/* Navegação de período */
.dp-navperiodo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.dp-navperiodo-linha { display: flex; align-items: center; gap: var(--espaco-3); }
.dp-navperiodo-texto { flex: 1; text-align: center; }
.dp-navperiodo-titulo { font: 700 20px/26px var(--font-display); }

/* Barras */
.dp-barras { display: flex; flex-direction: column; gap: var(--espaco-3); }
.dp-barras .dp-segmento { font-size: 15px; }
.dp-barras-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dp-barras-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) 72px; align-items: center; gap: 10px; min-height: 32px; }
.dp-barras-rotulo { display: flex; flex-direction: column; font: 600 14px/18px var(--font-texto); }
.dp-barras-detalhe { font: 400 12px/16px var(--font-texto); color: var(--tinta-suave); }
.dp-barras-trilho { height: 14px; display: flex; align-items: center; }
.dp-barras-valor { text-align: right; font: 600 14px/18px var(--font-texto); font-variant-numeric: tabular-nums; }

/* Carrossel */
.dp-carrossel-trilho { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; }
.dp-carrossel-trilho::-webkit-scrollbar { display: none; }
.dp-carrossel-cartao { flex: 0 0 62%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; }
.dp-carrossel-cartao .dp-icone-fundo { margin-bottom: 4px; }
.dp-carrossel-pontos { display: flex; justify-content: center; gap: 6px; }
.dp-carrossel-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--borda-campo); }
.dp-carrossel-ponto-atual { width: 18px; border-radius: var(--raio-pilula); background: var(--verde); }

/* Campo calculado */
.dp-campo-calculado { border-style: dashed; background: transparent; }
.dp-campo-calculado .dp-campo-input { color: var(--tinta-suave); }

/* Botão de perigo e item de perigo */
.dp-botao-perigo { background: var(--terroso); color: var(--sobre-terroso); border: 0; }
.dp-item-perigo .dp-item-titulo { color: var(--terroso); }

/* Aviso (desfazer) */
.dp-aviso { position: relative; display: flex; align-items: center; gap: var(--espaco-3); min-height: 52px; padding: 6px 8px 6px 16px; border-radius: var(--raio-campo); background: var(--tinta); color: var(--fundo); box-shadow: var(--sombra-destaque); overflow: hidden; box-sizing: border-box; }
.dp-aviso-texto { flex: 1; font: 500 15px/20px var(--font-texto); }
.dp-aviso-acao { min-height: var(--alvo-minimo); padding: 0 12px; border: 0; border-radius: var(--raio-campo); background: transparent; color: var(--fundo); font: 700 15px/20px var(--font-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dp-aviso-acao:focus-visible { outline: 2px solid var(--fundo); outline-offset: 2px; }
.dp-aviso-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--fundo); opacity: 0.5; transform-origin: left; animation: dp-aviso-contagem linear forwards; }
@keyframes dp-aviso-contagem { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .dp-aviso-tempo { animation: none; } }

/* Lembrete */
.dp-lembrete { display: flex; align-items: center; gap: 10px; min-height: var(--alvo-minimo); padding: 6px 14px; border: 1.5px solid var(--linha); border-radius: var(--raio-campo); color: var(--tinta-suave); box-sizing: border-box; }
.dp-lembrete-texto { flex: 1; font: 500 14px/18px var(--font-texto); }
.dp-lembrete-acao { display: flex; align-items: center; min-height: var(--alvo-minimo); color: var(--verde); font: 600 14px/18px var(--font-texto); text-decoration: none; white-space: nowrap; }
/* Editar custo (v0.72): "Vale a partir de quando?" logo abaixo do valor */
.dp-vale-desde { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: var(--raio-campo); background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--linha); }
/* Lembrete empilhado (v0.72): a ação numa linha própria, embaixo do texto e alinhada com ele */
.dp-lembrete-empilhado { flex-wrap: wrap; row-gap: 0; padding-top: 10px; padding-bottom: 2px; align-items: flex-start; }
.dp-lembrete-empilhado .dp-lembrete-texto { flex: 1 1 calc(100% - 30px); }
.dp-lembrete-empilhado .dp-lembrete-acao { flex-basis: 100%; padding-left: 30px; box-sizing: border-box; text-align: left; }

/* Folha de confirmação */
.dp-folha-veu { position: absolute; inset: 0; display: flex; align-items: flex-end; background: var(--veu); z-index: 10; }
.dp-folha { width: 100%; box-sizing: border-box; background: var(--superficie); border-radius: var(--raio-destaque) var(--raio-destaque) 0 0; padding: 12px 20px 24px; display: flex; flex-direction: column; gap: var(--espaco-3); box-shadow: var(--sombra-destaque); }
.dp-folha-alca { align-self: center; width: 40px; height: 4px; border-radius: var(--raio-pilula); background: var(--borda-campo); margin-bottom: 4px; }
.dp-folha-titulo { margin: 0; font: 700 22px/28px var(--font-display); color: var(--tinta); }
.dp-folha-texto { margin: 0; font: 400 15px/22px var(--font-texto); color: var(--tinta-suave); }
.dp-folha-acoes { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: 4px; }
/* Folha: números para comparar (v0.72); o destaque é tamanho e peso, nunca só cor */
.dp-folha-comparar { margin: 2px 0 0; padding: 4px 14px; border-radius: var(--raio-campo); background: var(--fundo); display: flex; flex-direction: column; }
.dp-folha-comparar-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; }
.dp-folha-comparar-linha + .dp-folha-comparar-linha { border-top: 1px solid var(--linha); }
.dp-folha-comparar-linha dt { font: 500 14px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-folha-comparar-linha dd { margin: 0; font: 600 16px/20px var(--font-texto); font-variant-numeric: tabular-nums; color: var(--tinta-suave); white-space: nowrap; }
.dp-folha-comparar-destaque dt { color: var(--tinta); }
.dp-folha-comparar-destaque dd { font: 700 20px/24px var(--font-display); color: var(--tinta); }

/* Ajustes do app para esses componentes */
.dp-extrato-comp { margin-top: 2px; }
.dp-carrossel-titulo { margin: 0; font: 600 14px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-carrossel { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.dp-carrossel-cartao .dp-metrica-comp { font: 500 12px/16px var(--font-texto); color: var(--tinta-suave); }
.dp-barras.dp-cartao { margin-top: var(--espaco-2); }
.aviso-fixo { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 488px; bottom: calc(var(--altura-nav) + 12px + env(safe-area-inset-bottom)); z-index: 30; }
body.sem-nav .aviso-fixo { bottom: calc(12px + env(safe-area-inset-bottom)); }
.dp-folha-veu { position: fixed; z-index: 40; }
.dp-folha { max-width: 520px; margin: 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.dp-lembrete-acao { background: transparent; border: 0; cursor: pointer; padding: 0; }
.leitura { font: 400 15px/22px var(--font-texto); color: var(--tinta); }
.dp-item-perigo .dp-icone-fundo { background: var(--terroso-suave); color: var(--terroso); }

/* Escolha (lista do próprio app) — sistema de design */
.dp-escolha { position: relative; }
.dp-escolha-caixa { width: 100%; cursor: pointer; text-align: left; font: inherit; }
.dp-escolha-caixa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-escolha-valor { flex: 1; min-width: 0; font: 500 17px/24px var(--font-texto); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-escolha-seta { color: var(--tinta-suave); transition: transform 180ms ease-out; }
.dp-escolha-aberta .dp-escolha-caixa { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.dp-escolha-aberta .dp-escolha-seta { transform: rotate(180deg); }
.dp-escolha-lista { position: absolute; left: 0; right: 0; top: calc(18px + var(--espaco-1) + var(--altura-campo) + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--superficie); border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transform-origin: top center; animation: dp-escolha-desce var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso) both; }
.dp-escolha-opcao { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 8px; cursor: pointer; outline: none; }
.dp-escolha-opcao + .dp-escolha-opcao { margin-top: 2px; }
.dp-escolha-opcao:hover, .dp-escolha-opcao:focus-visible { background: var(--superficie-afundada); }
.dp-escolha-opcao:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); }
.dp-escolha-opcao-sel, .dp-escolha-opcao-sel:hover { background: var(--verde-suave); }
.dp-escolha-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-escolha-nome { font: 600 16px/22px var(--font-texto); color: var(--tinta); }
.dp-escolha-detalhe { font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-escolha-opcao-sel .dp-escolha-nome { color: var(--verde); }
.dp-escolha-check { color: var(--verde); flex-shrink: 0; }
@keyframes dp-escolha-desce { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-escolha-lista { animation: none; } .dp-escolha-seta { transition: none; } }
.dp-escolha-aberta > .dp-legenda { visibility: hidden; }
.dp-escolha-opcao:not(.dp-escolha-opcao-sel) .dp-escolha-check { display: none; }
.dp-dist-passo-limite { opacity: var(--opacidade-desativado); cursor: default; }

/* ---------- Componentes da v0.4 (copiados do sistema de design, versão 40) ---------- */
.dp-selo-neutro { background: var(--superficie-afundada); color: var(--tinta); }
.dp-selo-verde { background: var(--verde-suave); color: var(--verde); }
/* Veículo em uso: selo verde "Em uso" no topo, com a legenda ao lado */
.dp-em-uso { display: flex; align-items: center; gap: 10px; }
.dp-em-uso .dp-selo { margin-left: 0; }
.dp-veiculo-usar { display: flex; flex-direction: column; gap: 4px; }
/* Veículo (v0.82): campos agrupados (fora de uso: desativados), parar de usar e legendas centradas. */
.dp-veiculo-campos { display: flex; flex-direction: column; gap: var(--espaco-3); }
.dp-veiculo-parar { display: flex; flex-direction: column; gap: 2px; }
.dp-legenda-centro { text-align: center; }
.dp-grupo-desativado { opacity: var(--opacidade-desativado); pointer-events: none; }
.dp-opcao:has(input:disabled) { opacity: var(--opacidade-desativado); cursor: default; }
.dp-campo-caixa:has(input:disabled) { opacity: var(--opacidade-desativado); }
/* Valor entendido embaixo do campo */
.dp-entendido strong { color: var(--tinta); font-weight: 700; }
.dp-entendido-erro { color: var(--terroso); }
/* Aviso de erro: o mesmo aviso escuro, com ícone de alerta; fica 6 s, sem ação */
.dp-aviso-erro { padding-left: 12px; }
.dp-aviso-icone { flex: none; color: var(--terroso-suave); }
.dp-item-detalhe .dp-selo { margin: 0 6px 0 0; vertical-align: 0; }
/* Movimento: mola com arranque (segura um instante, sai acelerando, passa um pouco e assenta). Por enquanto só na Regua e no Contador. */
:root { --dp-mola-arranque: cubic-bezier(0.55, 0, 0.2, 1.3); --dp-arranque-atraso: 50ms; --dp-duracao-mola: 340ms; --dp-recolher: 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.dp-contador { display: inline-flex; align-items: baseline; gap: 0.2em; font-variant-numeric: tabular-nums; }
.dp-contador-numero { display: inline-flex; align-items: baseline; }
.dp-contador-casa { display: inline-block; width: 1ch; height: 1.15em; line-height: 1.15em; overflow: hidden; text-align: center; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); vertical-align: bottom; }
.dp-contador-fita { display: flex; flex-direction: column; transition: transform var(--dp-duracao-mola) var(--dp-mola-arranque); will-change: transform; }
.dp-contador-fita > span { display: block; height: 1.15em; }
.dp-contador-sinal { display: inline-block; line-height: 1.15em; }
.dp-contador-afixo { font-family: var(--font-texto); font-weight: 500; font-size: 0.7em; color: var(--tinta-suave); }
.dp-cc-caixa { width: 100%; cursor: text; text-align: left; font: inherit; color: var(--tinta); }
.dp-cc-caixa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-cc-valor { flex: 1; min-width: 0; font: 600 18px/24px var(--font-display); overflow: hidden; white-space: nowrap; }
.dp-campo-calculado .dp-cc-valor { color: var(--tinta-suave); }
.dp-cc-digitar { width: 100%; font: 600 18px/24px var(--font-display); color: var(--tinta); outline: none; border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.dp-regua-lugar { position: relative; height: var(--altura-campo); }
.dp-regua-caixa { position: absolute; left: 0; right: 0; top: 0; height: var(--altura-campo); box-sizing: border-box; border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); background: var(--superficie); overflow: hidden; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: ew-resize; transition: top var(--dp-recolher), height var(--dp-recolher), box-shadow var(--dp-recolher), border-color var(--dp-recolher); }
/* aberta: cresce só um pouco, 22 px para cima (sobre o rótulo) e 8 px para baixo (sem chegar ao campo seguinte) */
.dp-regua-aberta .dp-regua-caixa { top: -22px; height: calc(var(--altura-campo) + 30px); z-index: 30; border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), 0 6px 18px rgba(0, 0, 0, 0.16); transition: top var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), height var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), box-shadow var(--dp-duracao-mola) ease var(--dp-arranque-atraso), border-color 120ms ease; }
.dp-regua-numero-botao { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); transform-origin: left center; border: 0; background: transparent; padding: 0 2px; margin: 0; color: var(--tinta); cursor: text; min-height: var(--alvo-minimo); display: flex; align-items: center; z-index: 2; transition: top var(--dp-recolher), left var(--dp-recolher), transform var(--dp-recolher); }
.dp-regua-numero-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-radius: 8px; }
.dp-regua-contador { font: 700 21px/1 var(--font-display); }
/* o número sobe para o topo, no centro, um pouco menor, e a régua passa por baixo dele */
.dp-regua-aberta .dp-regua-numero-botao { top: 14px; left: 50%; min-height: 24px; transform: translate(-50%, -50%) scale(0.82); transform-origin: center; transition: top var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), left var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), transform var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso); }
.dp-regua-digitar { position: absolute; left: 6px; top: 5px; width: 110px; height: 36px; box-sizing: border-box; border: 1.5px solid var(--verde); border-radius: 8px; background: var(--superficie); color: var(--tinta); font: 700 20px/1 var(--font-display); text-align: center; outline: none; z-index: 3; }
/* em repouso a régua fica escondida; ao abrir, ela se desenrola a partir do ponteiro para os dois lados */
.dp-regua-pista { position: absolute; left: 112px; right: 6px; top: 6px; height: 34px; overflow: hidden; outline: none; transition: left var(--dp-recolher), right var(--dp-recolher), top var(--dp-recolher), height var(--dp-recolher); }
.dp-regua-aberta .dp-regua-pista { left: 0; right: 0; top: 28px; height: 50px; transition: left var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), right var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), top var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), height var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso); }
.dp-regua-pista:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); border-radius: 8px; }
.dp-regua-fita { position: absolute; inset: 0; }
.dp-regua-marca { position: absolute; bottom: 4px; width: 1.5px; height: 8px; margin-left: -0.75px; border-radius: 1px; background: var(--tinta-suave); }
.dp-regua-marca-meio { height: 12px; }
.dp-regua-aberta .dp-regua-marca { bottom: 6px; height: 10px; }
.dp-regua-aberta .dp-regua-marca-meio { height: 15px; }
.dp-regua-marca-maior { width: 2px; margin-left: -1px; height: 18px; background: var(--tinta); }
.dp-regua-aberta .dp-regua-marca-maior { height: 22px; }
.dp-regua-numero { position: absolute; top: 4px; transform: translateX(-50%); font: 600 11px/14px var(--font-texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; visibility: hidden; }
.dp-regua-aberta .dp-regua-numero { visibility: visible; }
.dp-regua-ponteiro { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--verde); box-shadow: 0 0 0 2px var(--superficie); transition: top var(--dp-recolher), bottom var(--dp-recolher); }
.dp-regua-aberta .dp-regua-ponteiro { top: 16px; bottom: 3px; transition: top var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso), bottom var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso); }
@media (prefers-reduced-motion: reduce) { .dp-contador-fita, .dp-regua-caixa, .dp-regua-numero-botao, .dp-regua-pista { transition: none !important; } }
.dp-contador-rapido .dp-contador-fita { transition-duration: 90ms; transition-timing-function: ease-out; transition-delay: 0ms !important; }
.dp-contador-instantaneo .dp-contador-fita { transition: none; } /* v0.11.1: física nova, arrastando a régua */
/* BuscaCidade */
.dp-busca { position: relative; }
.dp-busca-aberta .dp-busca-caixa { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.dp-busca-painel { position: absolute; left: 0; right: 0; top: calc(18px + var(--espaco-1) + var(--altura-campo) + 6px); z-index: 20; box-sizing: border-box; padding: 8px 6px; background: var(--superficie); border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transform-origin: top center; animation: dp-escolha-desce var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso) both; }
.dp-busca-secao { padding: 4px 10px 2px; font: 600 12px/16px var(--font-texto); color: var(--tinta-suave); }
.dp-busca-lista { list-style: none; margin: 0; padding: 0; }
.dp-busca-item { display: flex; align-items: center; border-radius: 8px; }
.dp-busca-item-sel { background: var(--verde-suave); }
.dp-busca-nome { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; background: transparent; color: var(--tinta); font: 500 16px/22px var(--font-texto); text-align: left; cursor: pointer; border-radius: 8px; }
.dp-busca-nome .dp-icone { color: var(--tinta-suave); flex-shrink: 0; }
.dp-busca-nome:hover { background: var(--superficie-afundada); }
.dp-busca-nome:focus-visible, .dp-busca-estrela:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.dp-busca-estrela { width: var(--alvo-minimo); height: var(--alvo-minimo); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.dp-busca-estrela .dp-icone { transition: transform var(--dp-duracao-mola) var(--dp-mola-arranque); }
.dp-busca-estrela-cheia { color: var(--verde); }
.dp-busca-estrela-cheia .dp-icone { fill: currentColor; transform: scale(1.1); }
.dp-busca-divisor { height: 1px; margin: 6px 10px; background: var(--linha); }
.dp-busca-vazio { margin: 4px 10px 8px; font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
.dp-busca-limite { color: var(--terroso); }
.dp-busca-dica { margin: 8px 10px 4px; padding-top: 8px; border-top: 1px solid var(--linha); font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
/* FaixaMetricas */
.dp-faixa { display: flex; flex-direction: column; gap: 10px; }
.dp-faixa-titulo { margin: 0; font: 600 20px/26px var(--font-display); }
.dp-faixa-trilho { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 12%; }
.dp-faixa-trilho::-webkit-scrollbar { display: none; }
.dp-faixa-cartao { position: relative; flex: 0 0 76%; scroll-snap-align: center; box-sizing: border-box; min-height: 136px; padding: 16px 18px; border-radius: var(--raio-destaque); display: flex; flex-direction: column; gap: 6px; color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-cartao); transform: scale(0.94); opacity: 0.72; transition: transform var(--dp-duracao-mola) var(--dp-mola-arranque), opacity 250ms ease; }
.dp-faixa-atual { transform: none; opacity: 1; }
.dp-faixa-cartao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-faixa-verde { background: var(--verde); color: var(--sobre-verde); }
.dp-faixa-positivo { background: var(--verde-suave); }
.dp-faixa-custo { background: var(--terroso-suave); }
.dp-faixa-neutro { background: var(--superficie); }
.dp-faixa-topo { display: flex; align-items: center; gap: 8px; font: 500 14px/18px var(--font-texto); }
.dp-faixa-neutro .dp-faixa-topo, .dp-faixa-positivo .dp-faixa-topo, .dp-faixa-custo .dp-faixa-topo { color: var(--tinta-suave); }
.dp-faixa-positivo .dp-faixa-topo .dp-icone { color: var(--verde); }
.dp-faixa-custo .dp-faixa-topo .dp-icone, .dp-faixa-custo .dp-faixa-valor { color: var(--terroso); }
.dp-faixa-valor { font: 700 34px/40px var(--font-display); font-variant-numeric: tabular-nums; }
.dp-faixa-detalhe { font: 400 13px/18px var(--font-texto); opacity: 0.85; }
.dp-faixa-seta { position: absolute; right: 14px; top: 16px; opacity: 0.7; }
.dp-faixa-pontos { display: flex; justify-content: center; gap: 6px; }
.dp-faixa-ponto { position: relative; width: 6px; height: 6px; overflow: hidden; border-radius: var(--raio-pilula); background: var(--borda-campo); transition: width 250ms ease; }
.dp-faixa-ponto-atual { width: 22px; background: var(--verde); }
.dp-faixa-ponto-atual:has(.dp-faixa-progresso) { background: var(--borda-campo); }
.dp-faixa-progresso { position: absolute; inset: 0; background: var(--verde); transform-origin: left; animation: dp-faixa-encher linear forwards; }
@keyframes dp-faixa-encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Opcoes */
.dp-opcoes { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dp-opcoes > legend { padding: 0; margin-bottom: 4px; }
.dp-opcao { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.dp-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dp-opcao-bolinha { flex: 0 0 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border: 2px solid var(--borda-campo); border-radius: 50%; transition: border-color 150ms ease, background-color 150ms ease, box-shadow var(--dp-duracao-mola) var(--dp-mola-arranque); }
.dp-opcao-sel .dp-opcao-bolinha { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 4px var(--fundo); }
.dp-opcao input:focus-visible + .dp-opcao-bolinha { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-opcoes-titulo { margin-top: var(--espaco-3); }
.dp-opcao-textos { display: flex; flex-direction: column; gap: 2px; }
.dp-opcao-nome { font: 700 16px/22px var(--font-texto); color: var(--tinta); }
.dp-opcao-detalhe { font: 400 13px/18px var(--font-texto); color: var(--tinta-suave); }
/* Explicação das métricas (Carrossel) */
.dp-carrossel-cartao { position: relative; }
.dp-info-botao { position: absolute; top: 4px; right: 4px; width: var(--alvo-minimo); height: var(--alvo-minimo); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.dp-info-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
/* BotaoInfo (v0.13.0): o "i" de 20 px com alvo de 48 px (margem negativa: não empurra a linha). */
.dp-botao-info { flex: none; width: 48px; height: 48px; margin: -14px -14px -14px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.dp-botao-info:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.dp-com-info { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); width: 100%; }
.dp-com-info > .dp-legenda { margin: 0; }
legend.dp-com-info > span { min-width: 0; }
.dp-explicacao-veu { position: absolute; }
.dp-explicacao { animation: dp-folha-sobe var(--dp-duracao-mola) var(--dp-mola-arranque) var(--dp-arranque-atraso) both; }
@keyframes dp-folha-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dp-explicacao-topo { display: flex; align-items: center; gap: 10px; }
.dp-explicacao-valor { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .dp-busca-painel, .dp-explicacao { animation: none; } .dp-faixa-cartao, .dp-opcao-bolinha { transition: none !important; } .dp-faixa-progresso { animation: none; } }
/* Abastecimento: régua e valor pago lado a lado (65/35) */
.linha-65-35 { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 10px; align-items: start; }
/* Ajustes da v0.4 para o app (a tela é a janela inteira, com abas fixas) */
.dp-explicacao-veu { position: fixed; z-index: 40; }
.dp-explicacao { max-width: 520px; margin: 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Barra de km: "0" e "75 km" em negrito */
.dp-dist-marca { font-weight: 700; }
/* Métrica aberta a partir do Início: destaque curto */
.dp-alvo { animation: dp-alvo 1.6s ease-out; }
@keyframes dp-alvo { from { box-shadow: 0 0 0 3px var(--verde); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .dp-alvo { animation: none; outline: 2px solid var(--verde); outline-offset: 2px; } }

/* ---------- Material vidro (sistema de design, versão 40) ---------- */
/* ===== Material: vidro (inspirado no Liquid Glass) — v2: mais transparente, borda alta e centro afundado, pouco desfoque. ===== */
:root {
  --vidro-tinta: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10) 55%, rgba(255, 255, 255, 0.20));
  --vidro-tinta-solida: rgba(250, 248, 243, 0.92);
  --vidro-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.95), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 12px 2px rgba(255, 255, 255, 0.35), inset 0 -10px 18px -10px rgba(20, 30, 25, 0.12);
  --vidro-contorno: 0 0 0 0.5px rgba(27, 27, 24, 0.14);
  --vidro-sombra: 0 8px 22px rgba(20, 30, 25, 0.16), 0 1px 3px rgba(20, 30, 25, 0.10);
  --vidro-fundo-tela: rgba(244, 241, 234, 0.22);
  --vidro-fundo-tela-solido: rgba(244, 241, 234, 0.86);
  --vidro-halo: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
  --vidro-texto-sombra: 0 0 6px rgba(255, 255, 255, 0.8);
  --vidro-desfoque: 5px;
  --vidro-lente: blur(2.5px) saturate(1.8) brightness(1.06);
  /* barra de abas líquida (v0.8): tinta branca no claro; --barra-opacidade e --barra-miolo não são opções do app */
  --barra-opacidade: 0.3;
  --barra-miolo: 0.30;
  --barra-tinta-cor: 255, 255, 255;
  --barra-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.95), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.45), inset 0 0 10px 1px rgba(255, 255, 255, 0.3), inset 0 -8px 14px -8px rgba(20, 30, 25, 0.10);
  --barra-contorno: 0 0 0 0.5px rgba(27, 27, 24, 0.18);
  --barra-sombra: 0 8px 24px rgba(20, 30, 25, 0.16), 0 1px 3px rgba(20, 30, 25, 0.10);
  --barra-sel-tinta: linear-gradient(180deg, rgba(20, 30, 25, 0.05), rgba(20, 30, 25, 0.09));
  --barra-sel-tinta-ativa: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  --barra-sel-brilho: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
  --barra-sel-brilho-ativa: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%);
  --barra-sel-aro: inset 2px 2px 1.5px rgba(255, 255, 255, 0.95), inset -2px -2px 2px rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 12px 2px rgba(255, 255, 255, 0.28), inset 0 -10px 14px -10px rgba(20, 30, 25, 0.18);
  --barra-sel-sombra: 0 4px 14px rgba(20, 30, 25, 0.14), 0 1px 2px rgba(20, 30, 25, 0.10);
}
[data-theme="escuro"] {
  --vidro-tinta: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08));
  --vidro-tinta-solida: rgba(38, 37, 32, 0.94);
  --vidro-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.45), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 12px 2px rgba(255, 255, 255, 0.10), inset 0 -10px 18px -10px rgba(0, 0, 0, 0.35);
  --vidro-contorno: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --vidro-sombra: 0 8px 22px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --vidro-fundo-tela: rgba(23, 22, 19, 0.30);
  --vidro-fundo-tela-solido: rgba(23, 22, 19, 0.86);
  --vidro-halo: drop-shadow(0 0 1.5px rgba(10, 15, 12, 0.9)) drop-shadow(0 0 1px rgba(10, 15, 12, 0.8));
  --vidro-texto-sombra: 0 0 6px rgba(0, 0, 0, 0.7);
  --vidro-lente: blur(2.5px) saturate(1.6) brightness(0.95);
  --barra-tinta-cor: 34, 33, 29;
  --barra-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.38), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 0 10px 1px rgba(255, 255, 255, 0.06), inset 0 -8px 14px -8px rgba(0, 0, 0, 0.35);
  --barra-contorno: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  --barra-sombra: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --barra-sel-tinta: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --barra-sel-tinta-ativa: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --barra-sel-brilho: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  --barra-sel-brilho-ativa: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  --barra-sel-aro: inset 2px 2px 1.5px rgba(255, 255, 255, 0.5), inset -2px -2px 2px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 12px 2px rgba(255, 255, 255, 0.08), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.45);
  --barra-sel-sombra: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) {
  --vidro-tinta: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08));
  --vidro-tinta-solida: rgba(38, 37, 32, 0.94);
  --vidro-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.45), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 12px 2px rgba(255, 255, 255, 0.10), inset 0 -10px 18px -10px rgba(0, 0, 0, 0.35);
  --vidro-contorno: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --vidro-sombra: 0 8px 22px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --vidro-fundo-tela: rgba(23, 22, 19, 0.30);
  --vidro-fundo-tela-solido: rgba(23, 22, 19, 0.86);
  --vidro-halo: drop-shadow(0 0 1.5px rgba(10, 15, 12, 0.9)) drop-shadow(0 0 1px rgba(10, 15, 12, 0.8));
  --vidro-texto-sombra: 0 0 6px rgba(0, 0, 0, 0.7);
  --vidro-lente: blur(2.5px) saturate(1.6) brightness(0.95);
  --barra-tinta-cor: 34, 33, 29;
  --barra-aro: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.38), inset -1.5px -1.5px 1px rgba(255, 255, 255, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 0 10px 1px rgba(255, 255, 255, 0.06), inset 0 -8px 14px -8px rgba(0, 0, 0, 0.35);
  --barra-contorno: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  --barra-sombra: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --barra-sel-tinta: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --barra-sel-tinta-ativa: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --barra-sel-brilho: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  --barra-sel-brilho-ativa: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  --barra-sel-aro: inset 2px 2px 1.5px rgba(255, 255, 255, 0.5), inset -2px -2px 2px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 12px 2px rgba(255, 255, 255, 0.08), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.45);
  --barra-sel-sombra: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
} }
/* Fundo desfocado (não é peça de vidro): tela atrás desfocada de leve e um pouco clareada/escurecida. Só a opacidade anima. */
.dp-foco-fundo { background: var(--vidro-fundo-tela); -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(1.3); backdrop-filter: blur(var(--vidro-desfoque)) saturate(1.3); transition: opacity 220ms ease, visibility 0s linear 220ms; }
.dp-foco-fundo { position: fixed; inset: 0; z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.dp-regua-aberta, .dp-dist-ativo { position: relative; z-index: 31; }
.dp-regua-aberta .dp-foco-fundo, .dp-dist-ativo .dp-foco-fundo { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.dp-dist-ativo > :not(.dp-foco-fundo) { position: relative; }
/* 2. Régua aberta: a tela atrás desfoca (fundo de foco) e a caixa vira peça de vidro sem desfoque próprio (o que está atrás já está desfocado). */
.dp-regua-aberta .dp-regua-caixa { background: var(--vidro-tinta); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: var(--vidro-aro), 0 0 0 1.5px var(--verde), var(--vidro-sombra); }
.dp-regua-caixa::before { content: none; }
.dp-regua-aberta .dp-regua-numero-botao { background: none; box-shadow: none; padding: 0 2px; text-shadow: var(--vidro-texto-sombra); }
.dp-regua-aberta .dp-regua-pista { left: 0; right: 0; top: 28px; height: 50px; border-radius: 0; background: none; box-shadow: none; }
.dp-regua-aberta .dp-regua-numero { text-shadow: var(--vidro-texto-sombra); color: var(--tinta); }
/* 3. Barra de km tocada: a tela atrás desfoca e uma lâmina de vidro (sem desfoque próprio) fica atrás da barra, do − ao +. */
.dp-dist-pista::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 44px; border-radius: var(--raio-pilula); background: var(--vidro-tinta); box-shadow: var(--vidro-aro), var(--vidro-contorno), var(--vidro-sombra); opacity: 0; transform: scaleX(0.6); transition: opacity 180ms ease, transform 200ms ease-out; pointer-events: none; }
.dp-dist-ativo .dp-dist-pista::before { opacity: 1; transform: none; transition: opacity 200ms ease, transform 260ms var(--dp-dist-mola); }
.dp-dist-barra, .dp-dist-bolinha, .dp-dist-passo, .dp-dist-balao { z-index: 1; }
.dp-dist-ativo .dp-dist-marca { top: 76px; }
.dp-dist-ativo .dp-dist-numero, .dp-dist-ativo .dp-campo-rotulo { text-shadow: var(--vidro-texto-sombra); }
/* Sem desfoque: fundos mais opacos, peças sem lente; mantém aro e sombra. */
[data-vidro="sem-desfoque"] .dp-foco-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-fundo-tela-solido); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dp-foco-fundo { background: var(--vidro-fundo-tela-solido); }
}
/* Leve: durante o arraste da régua ou da barra, o fundo de foco troca o desfoque por tinta (sem animar o desfoque). */
[data-vidro="leve"] .dp-regua-aberta:has(.dp-regua-arrastando) .dp-foco-fundo, [data-vidro="leve"] .dp-dist-arrastando .dp-foco-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-fundo-tela-solido); }
@media (prefers-reduced-transparency: reduce) {
  .dp-foco-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-fundo-tela-solido); }
}
/* ===== Material: vidro vivo — refração nas bordas e pseudorreflexo (só Chromium; o JS liga com .dp-vidro-vivo / .dp-dist-vivo) ===== */
/* A peça perde o próprio backdrop-filter; quem desenha a lente é a camada ::after, 16 px maior que a peça para o aro pegar a cor do que está em volta. */
.dp-vidro-vivo { isolation: isolate; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dp-vidro-vivo::after { content: ""; position: absolute; inset: var(--dp-vidro-recuo, -16px); z-index: -2; -webkit-backdrop-filter: var(--dp-vidro-filtro); backdrop-filter: var(--dp-vidro-filtro); pointer-events: none; }
/* o contorno verde e a sombra vão para o ::before (acima da lente), senão a lente entortava o próprio contorno e aparecia um filete curvo nas bordas */
.dp-regua-aberta .dp-regua-caixa.dp-vidro-vivo { background: none; border-color: transparent; box-shadow: none; }
.dp-regua-aberta .dp-regua-caixa.dp-vidro-vivo::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: var(--raio-campo); background: var(--vidro-tinta); box-shadow: var(--vidro-aro), 0 0 0 1.5px var(--verde), var(--vidro-sombra); pointer-events: none; }
.dp-dist-vivo { isolation: isolate; }
.dp-dist-vivo::after { content: ""; position: absolute; left: -16px; right: -16px; top: 14px; height: 76px; z-index: -1; -webkit-backdrop-filter: var(--dp-vidro-filtro); backdrop-filter: var(--dp-vidro-filtro); opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.dp-dist-ativo .dp-dist-vivo::after { opacity: 1; transition: opacity 200ms ease; }
/* modo leve: durante o arrasto, sem lente viva (a peça fica como no vidro v2) */
[data-vidro="leve"] .dp-regua-arrastando.dp-vidro-vivo::after, [data-vidro="leve"] .dp-dist-arrastando .dp-dist-vivo::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-vidro="sem-desfoque"] .dp-vidro-vivo::after, [data-vidro="sem-desfoque"] .dp-dist-vivo::after { display: none; }
@media (prefers-reduced-transparency: reduce) { .dp-vidro-vivo::after, .dp-dist-vivo::after { display: none; } }

/* Régua de litros em repouso (Abastecimento): campo vidroso — aro de vidro, tinta translúcida e, no Chromium, o reflexo das cores em volta. A caixa não perde o contorno de campo. */
.dp-regua:not(.dp-regua-aberta) .dp-regua-caixa { border-color: transparent; background: var(--vidro-tinta), color-mix(in srgb, var(--superficie) 58%, transparent); box-shadow: var(--vidro-aro), var(--vidro-contorno), 0 4px 12px rgba(20, 30, 25, 0.08); }
.dp-regua-caixa.dp-vidro-vivo { overflow: visible; }
.dp-regua:not(.dp-regua-aberta) .dp-regua-caixa.dp-vidro-vivo { background: none; border-color: transparent; box-shadow: none; }
.dp-regua:not(.dp-regua-aberta) .dp-regua-caixa.dp-vidro-vivo::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: var(--raio-campo); background: var(--vidro-tinta), color-mix(in srgb, var(--superficie) 58%, transparent); box-shadow: var(--vidro-aro), var(--vidro-contorno), 0 4px 12px rgba(20, 30, 25, 0.08); pointer-events: none; }
/* a régua miúda de repouso lembrava um velocímetro: marcas mais discretas e ponteiro fino */
.dp-regua:not(.dp-regua-aberta) .dp-regua-marca { opacity: 0.45; }
.dp-regua:not(.dp-regua-aberta) .dp-regua-ponteiro { width: 2px; margin-left: -1px; opacity: 0.8; box-shadow: none; }

/* Campo que não desfoca: com a régua ao lado aberta, o CampoContador "nitido" sobe acima do fundo de foco (e da película dele) e continua legível, com os números rolando. Não encosta na régua: ficam lado a lado. */
:root:has(.dp-regua-aberta) .dp-cc-nitido { position: relative; z-index: 32; }

/* CampoContador com vidro (Valor pago do Abastecimento): mesmo material da régua de litros em repouso */
.dp-cc-vidro .dp-cc-caixa { position: relative; border-color: transparent; background: var(--vidro-tinta), color-mix(in srgb, var(--superficie) 58%, transparent); box-shadow: var(--vidro-aro), var(--vidro-contorno), 0 4px 12px rgba(20, 30, 25, 0.08); }
.dp-cc-vidro .dp-cc-caixa.dp-vidro-vivo { background: none; box-shadow: none; }
.dp-cc-vidro .dp-cc-caixa.dp-vidro-vivo::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: var(--raio-campo); background: var(--vidro-tinta), color-mix(in srgb, var(--superficie) 58%, transparent); box-shadow: var(--vidro-aro), var(--vidro-contorno), 0 4px 12px rgba(20, 30, 25, 0.08); pointer-events: none; }
/* Barra de km: "0" e "75 km" em negrito; com o vidro vivo, ficam por baixo da lente para a borda da lâmina refletir os dois */
.dp-dist-marca { font-weight: 700; }
.dp-dist-vivo .dp-dist-marca { z-index: -2; }
/* com a régua aberta, o Valor pago (vidro + nítido) perde o branco do campo e fica com a mesma tinta da régua aberta: vidro sobre o fundo creme */
:root:has(.dp-regua-aberta) .dp-cc-nitido.dp-cc-vidro .dp-cc-caixa, :root:has(.dp-regua-aberta) .dp-cc-nitido.dp-cc-vidro .dp-cc-caixa.dp-vidro-vivo::before { background: var(--vidro-tinta), var(--vidro-fundo-tela); }
:root:has(.dp-regua-aberta) .dp-cc-nitido.dp-cc-vidro .dp-cc-caixa.dp-vidro-vivo { background: none; }

/* ===== v0.5 ===== */
/* Contagem: − número + dentro de uma caixa de campo; os botões têm 48 px de alvo (v0.12.0) */
.dp-contagem { padding: 0 2px; gap: 0; justify-content: space-between; }
.dp-contagem-passo { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--verde); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-contagem-passo:active:not(:disabled) { background: var(--verde-suave); }
.dp-contagem-passo:disabled { color: var(--tinta-suave); opacity: var(--opacidade-desativado); cursor: default; pointer-events: none; }
.dp-contagem-passo:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.dp-contagem-valor { flex: 1; min-width: 0; text-align: center; font: 600 18px/24px var(--font-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.dp-contagem-vazio { color: var(--tinta-suave); font-weight: 400; }
/* Boas-vindas: o botão Começar fica no pé da tela; apagado até ter nome */
.dp-boas-vindas { min-height: calc(100dvh - 120px); padding-top: var(--espaco-5); padding-bottom: var(--espaco-5); gap: var(--espaco-4); }
.dp-boas-vindas-chamada { margin: 0; font: 600 20px/28px var(--font-display); color: var(--tinta); }

/* ===== v0.5: gráficos de pontos (Pontos e LinhaDoTempo), do sistema de design 43 ===== */
/* Barras com escala automática: um ponto por valor numa linha; o eixo mostra início, meio e fim */
.dp-barras-pontos { position: relative; height: 14px; }
.dp-barras-pontos::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--superficie-afundada); }
.dp-barras-ponto { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--superficie); }
.dp-barras-eixo { position: relative; height: 14px; margin-left: 102px; margin-right: 82px; font: 500 11px/14px var(--font-texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ===== Gráficos de pontos: eixo, balão, linha do tempo ===== */
.dp-barras-eixo span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dp-barras-eixo span:first-child { transform: none; }
.dp-barras-eixo span:last-child { transform: translateX(-100%); }
.dp-eixo-zero { color: var(--tinta); font-weight: 700; }
.dp-barras-tocavel { cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.dp-barras-tocavel:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-barras-pontos { overflow: visible; }
.dp-grafico-zero-v { position: absolute; top: -6px; bottom: -6px; width: 1.5px; margin-left: -0.75px; background: var(--tinta-suave); opacity: 0.6; }
.dp-barras-ponto { transition: transform 160ms ease; }
.dp-barras-ativo .dp-barras-ponto { transform: scale(1.35); }
.dp-barras-lista:has(.dp-barras-ativo) .dp-barras-item:not(.dp-barras-ativo) .dp-barras-ponto { opacity: 0.4; }
.dp-ponto-negativo { background: var(--terroso) !important; }
/* balão: o mesmo da barra de km (tinta escura, seta para baixo); some ao tocar fora, no mesmo ponto ou ao trocar a métrica */
.dp-grafico-balao { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 3; padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--fundo); font: 600 14px/18px var(--font-texto); white-space: nowrap; pointer-events: none; animation: dp-balao-surge 160ms ease-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.dp-grafico-balao::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tinta); }
.dp-balao-esq { transform: translateX(-14px); }
.dp-balao-esq::after { left: 14px; }
.dp-balao-dir { transform: translateX(calc(-100% + 14px)); }
.dp-balao-dir::after { left: calc(100% - 14px); }
/* LinhaDoTempo */
.dp-tempo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.dp-tempo .dp-segmento { font-size: 15px; }
.dp-tempo-area { position: relative; height: 160px; margin: 34px 0 0; touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.dp-tempo-area::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha); }
.dp-tempo-y { position: absolute; left: 0; font: 500 11px/14px var(--font-texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; pointer-events: none; }
.dp-tempo-y-hi { top: -18px; }
.dp-tempo-y-lo { bottom: 4px; }
.dp-tempo-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--tinta-suave); opacity: 0.7; pointer-events: none; }
.dp-tempo-zero span { position: absolute; right: 0; top: -16px; font: 700 11px/14px var(--font-texto); color: var(--tinta); }
.dp-tempo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dp-tempo-linha { fill: none; stroke: var(--verde); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; opacity: 0.5; transition: opacity 180ms ease; }
.dp-tempo-preench { fill: var(--verde); opacity: 0; transition: opacity 180ms ease; }
.dp-tempo-ativo .dp-tempo-linha { opacity: 1; stroke-width: 2px; }
.dp-tempo-ativo .dp-tempo-preench { opacity: 0.16; }
.dp-tempo-ponto { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--superficie); pointer-events: none; transition: transform 140ms ease; }
.dp-tempo-ponto-sel { transform: scale(1.6); }
/* Modo denso (35 pontos ou mais): pontos de 5 px, sem anel; o ponto tocado cresce. */
.dp-tempo-denso .dp-tempo-ponto { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; box-shadow: none; }
.dp-tempo-denso .dp-tempo-ponto-sel { transform: scale(2); box-shadow: 0 0 0 1px var(--superficie); }
.dp-tempo-guia { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--tinta-suave); opacity: 0.5; pointer-events: none; }
.dp-tempo-balao { bottom: auto; transform: translate(-50%, calc(-100% - 12px)); }
.dp-tempo-balao.dp-balao-esq { transform: translate(-14px, calc(-100% - 12px)); }
.dp-tempo-balao.dp-balao-dir { transform: translate(calc(-100% + 14px), calc(-100% - 12px)); }
.dp-tempo-balao.dp-balao-baixo { transform: translate(-50%, 14px); }
.dp-tempo-balao.dp-balao-baixo.dp-balao-esq { transform: translate(-14px, 14px); }
.dp-tempo-balao.dp-balao-baixo.dp-balao-dir { transform: translate(calc(-100% + 14px), 14px); }
.dp-tempo-balao.dp-balao-baixo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tinta); }
.dp-tempo-x { position: relative; height: 16px; font: 500 11px/14px var(--font-texto); color: var(--tinta-suave); }
.dp-tempo-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dp-tempo-x span:first-child { transform: none; }
.dp-tempo-x span:last-child { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .dp-grafico-balao { animation: none; } .dp-tempo-linha, .dp-tempo-preench, .dp-tempo-ponto, .dp-barras-ponto { transition: none; } }
@keyframes dp-balao-surge { from { opacity: 0; } to { opacity: 1; } }
.dp-tempo .dp-segmento { font-size: 14px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
/* eixo vertical numa calha à esquerda, para os rótulos não caírem sobre os pontos */
.dp-tempo-area { margin-left: 48px; }
.dp-tempo-y { left: -48px; width: 42px; text-align: right; }
.dp-tempo-y-hi { top: -7px; }
.dp-tempo-y-lo { bottom: -7px; }
.dp-tempo-zero span { right: auto; left: -48px; width: 42px; text-align: right; top: -8px; }
.dp-tempo-x { margin-left: 48px; }
.dp-tempo-area { margin-top: 40px; }
.dp-grafico-balao { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px 7px; }
.dp-grafico-balao strong { font: 700 15px/20px var(--font-texto); }
.dp-grafico-balao span { font: 500 13px/17px var(--font-texto); opacity: 0.85; }
/* App: área até o zero em verde claro acima e terroso claro abaixo; os outros pontos ficam apagados */
.dp-tempo-preench-neg { fill: var(--terroso); opacity: 0; transition: opacity 180ms ease; }
.dp-tempo-ativo .dp-tempo-preench-neg { opacity: 0.18; }
.dp-tempo-linha-neg { stroke: var(--terroso); }
.dp-grafico-vazio { margin: 0; font: 400 14px/20px var(--font-texto); color: var(--tinta-suave); }
/* calha do eixo um pouco mais larga, para "−R$ 100" caber numa linha */
.dp-tempo-area, .dp-tempo-x { margin-left: 56px; }
.dp-tempo-y { left: -56px; width: 50px; white-space: nowrap; }
.dp-tempo-zero span { left: -56px; width: 50px; }

/* ===== v0.5, parte 3 (sistema de design 44) ===== */
/* Estado desativado: um valor único em todo o app (botões, − e + da Contagem, dias futuros do calendário).
   Não responde ao toque e não muda de cor no toque. */
:root { --opacidade-desativado: 0.35; }
.dp-botao:disabled, .dp-botao[aria-disabled="true"], .dp-botao-icone:disabled, .dp-botao-icone[aria-disabled="true"] { opacity: var(--opacidade-desativado); cursor: default; pointer-events: none; }
.dp-tempo-area, .dp-tempo-x { margin-left: 58px; }
.dp-tempo-y { left: -58px; width: 52px; }
.dp-tempo-zero span { left: -58px; width: 52px; white-space: nowrap; }
/* Título do período: botão que abre o calendário */
.dp-navperiodo-escolher { border: 0; background: transparent; color: inherit; font: inherit; padding: 4px 6px; border-radius: 10px; cursor: pointer; min-height: var(--alvo-minimo); -webkit-tap-highlight-color: transparent; }
.dp-navperiodo-escolher:active { background: var(--superficie-afundada); }
.dp-navperiodo-escolher:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-navperiodo-escolher { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dp-navperiodo-titulo { display: inline-flex; align-items: center; gap: 6px; }
.dp-navperiodo-icone { color: var(--verde); }
/* Calendario */
.dp-calendario { display: flex; flex-direction: column; gap: 6px; }
.dp-calendario-topo { display: flex; align-items: center; gap: 8px; }
.dp-calendario-mes { flex: 1; text-align: center; font: 700 18px/24px var(--font-display); }
.dp-calendario-mes::first-letter { text-transform: uppercase; }
.dp-calendario-semana, .dp-calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-calendario-semana span { text-align: center; font: 600 12px/20px var(--font-texto); color: var(--tinta-suave); }
.dp-calendario-dia { height: 44px; border: 0; padding: 0; background: transparent; color: var(--tinta); font: 500 16px/1 var(--font-texto); font-variant-numeric: tabular-nums; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.dp-calendario-dia span { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.dp-calendario-dia:disabled { color: var(--tinta-suave); opacity: var(--opacidade-desativado); cursor: default; pointer-events: none; }
.dp-calendario-hoje span { box-shadow: inset 0 0 0 1.5px var(--borda-campo); }
.dp-calendario-dentro { background: var(--verde-suave); }
.dp-calendario-ini { background: linear-gradient(90deg, transparent 50%, var(--verde-suave) 50%); }
.dp-calendario-fim { background: linear-gradient(90deg, var(--verde-suave) 50%, transparent 50%); }
.dp-calendario-ponta span { background: var(--verde); color: var(--sobre-verde); font-weight: 700; box-shadow: none; }
.dp-calendario-dia:focus-visible span { outline: 2px solid var(--foco); outline-offset: 1px; }
.dp-calendario-resumo { margin: 4px 0 0; text-align: center; font: 600 15px/20px var(--font-texto); color: var(--tinta); }

/* ===== v0.6: Nota (avaliação qualitativa), do sistema de design versão 50 ===== */
/* Nota (avaliação qualitativa): nome do nível sempre escrito + escala de 5 traços crescentes.
   Ótima e Boa em verde, Ok em tinta, Ruim e Péssima em terroso. Sem moldura, sem carimbo, sem rotação:
   a nota pode mudar um pouco quando um intervalo de abastecimento fecha. */
.dp-nota { display: flex; flex-direction: column; gap: 10px; color: var(--tinta); text-decoration: none; }
.dp-nota-toque { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; }
.dp-nota-toque:active { transform: scale(0.985); }
.dp-nota-toque:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-nota-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.dp-nota-cabeca .dp-selo, .dp-nota-ultima-cabeca .dp-selo { vertical-align: 0; }
.dp-nota-seta { color: var(--tinta-suave); margin-right: -4px; }
.dp-nota-nivel { display: inline-flex; align-items: center; gap: 10px; }
.dp-nota-nome { font-family: var(--font-display); font-weight: 700; }
.dp-nota-grande .dp-nota-nome { font-size: 40px; line-height: 44px; letter-spacing: -0.01em; }
.dp-nota-medio .dp-nota-nome { font-size: 20px; line-height: 26px; }
.dp-nota-pequeno .dp-nota-nome { font: 600 15px/20px var(--font-texto); }
/* medidor (v0.9.0): meio mostrador de 5 partes com ponteiro, antes da palavra; as cores por nível não mudam */
.dp-nota-medio, .dp-nota-pequeno { gap: 7px; }
.dp-medidor { display: block; flex: none; width: 60px; height: 35px; overflow: visible; }
.dp-nota-medio .dp-medidor { width: 38px; height: 22px; }
.dp-nota-pequeno .dp-medidor { width: 36px; height: 21px; }
/* v0.14.0: partes vazias por token; no escuro, #857F72 cheio (4:1), para ler ao sol */
.dp-medidor-seg { fill: none; stroke: var(--medidor-vazio); stroke-width: 6; opacity: var(--medidor-vazio-op); }
.dp-medidor-cheio { opacity: 1; }
.dp-medidor-ponteiro line { stroke: var(--tinta); stroke-width: 2.6; stroke-linecap: round; }
.dp-medidor-ponteiro circle { fill: var(--tinta); }
/* pequeno (Lançamentos): ponteiro mais grosso e centro maior, para ler ao sol */
.dp-nota-pequeno .dp-medidor-ponteiro line { stroke-width: 3.6; }
.dp-nota-pequeno .dp-medidor-ponteiro circle { r: 3.4; }
.dp-nota-tom-positivo .dp-nota-nome { color: var(--verde); }
.dp-nota-tom-positivo .dp-medidor-cheio { stroke: var(--verde); }
/* v0.14.0: Péssima e Ruim no vinho da nota baixa (o terroso é só de custo) */
.dp-nota-tom-pessima .dp-nota-nome { color: var(--nota-pessima); }
.dp-nota-tom-pessima .dp-medidor-cheio { stroke: var(--nota-pessima); }
.dp-nota-tom-ruim .dp-nota-nome { color: var(--nota-ruim); }
.dp-nota-tom-ruim .dp-medidor-cheio { stroke: var(--nota-ruim); }
.dp-nota-tom-neutro .dp-nota-nome { color: var(--tinta); }
.dp-nota-tom-neutro .dp-medidor-cheio { stroke: var(--tinta-suave); }
/* no escuro, o Ok cheio em tinta, para não se confundir com as partes vazias */
:root[data-theme="escuro"] .dp-nota-tom-neutro .dp-medidor-cheio { stroke: var(--tinta); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .dp-nota-tom-neutro .dp-medidor-cheio { stroke: var(--tinta); } }
.dp-nota-sem .dp-nota-nome { color: var(--tinta-suave); }
.dp-nota-vazio { margin: 0; font: 600 20px/26px var(--font-display); color: var(--tinta); }
/* motivos: até 3, em ordem de prioridade; cada um cabe em duas linhas (~70 caracteres) */
.dp-nota-motivos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dp-nota-motivos li { position: relative; padding-left: 14px; font: 400 15px/21px var(--font-texto); color: var(--tinta); }
.dp-nota-motivos li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--tinta-suave); }
/* a última rota, dentro do cartão do dia: um degrau menor, separada por uma linha */
.dp-nota-ultima { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--linha); }
.dp-nota-ultima-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-3); }
/* rota na lista do Resultado do dia */
.dp-nota-rota { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 14px; }
.dp-nota-rota-linha { display: flex; align-items: center; gap: 12px; }
.dp-nota-rota .dp-nota-motivos li { font-size: 14px; line-height: 20px; }
.dp-nota-rota .dp-nota-motivos li::before { top: 7.5px; }
/* custo fixo sem custos cadastrados (app novo): frase no lugar do valor, toque abre Custos */
.dp-custofixo-vazio { color: var(--tinta); text-decoration: none; }
.dp-custofixo-seta { margin-left: auto; }
.dp-custofixo-vazio-texto { margin: 0; font: 600 20px/26px var(--font-display); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .dp-nota-toque { transition: none; } .dp-nota-toque:active { transform: none; } }
/* v0.71: sem nota por falta do custo do combustível (Nota.pendencia): corpo e atalho, dois toques separados */
.dp-nota-com-pendencia { padding: 0; gap: 0; overflow: hidden; }
.dp-nota-corpo { display: flex; flex-direction: column; gap: 10px; padding: var(--espaco-4); color: var(--tinta); text-decoration: none; }
.dp-cartao-destaque.dp-nota-com-pendencia .dp-nota-corpo { padding: var(--espaco-5) var(--espaco-5) var(--espaco-4); }
.dp-nota-corpo.dp-nota-toque:active { transform: none; background: var(--superficie-afundada); }
.dp-nota-pendencia { margin: 0; font: 400 15px/21px var(--font-texto); color: var(--tinta); }
.dp-nota-acao { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-minimo); padding: 10px var(--espaco-5); border-top: 1px solid var(--linha); color: var(--verde); font: 600 16px/22px var(--font-texto); text-decoration: none; }
.dp-nota-acao:active { background: var(--verde-suave); }
button.dp-nota-acao { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--linha); cursor: pointer; text-align: left; }
.dp-nota-acao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
/* v0.71: custo fixo com o ganho do dia ainda desconhecido */
.dp-custofixo-semganho { font-size: 14px; }
/* v0.71: nota do dia logo depois do título do grupo, em Lançamentos */
.dp-lista-titulo-dia { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* v0.71: Boas-vindas com o veículo */
.dp-boas-vindas-secao { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dp-boas-vindas-titulo { margin: 0; font: 600 20px/26px var(--font-display); color: var(--tinta); }

/* ===== v0.9.0: o + como centro de atalhos (BotaoMais rev. 5), Tecla e barra junta (sistema de design versão 82) =====
   Vidro colorido: deixa ver o fundo (desfoque leve), tinge de verde e fica mais verde na beirada, como um copo;
   luz de frente (brilho no alto), sem sombra jogada para um lado. Nome e ícone foscos ("gravados").
   vc = vidro colorido claro; vv = vidro verde (esmeralda). */
:root {
  --np-cor-1: #8E2448; --np-cor-2: #A8455F; --np-cor-3: #57554D; --np-cor-4: #2C7752; --np-cor-5: #155B3C; --np-texto: #FFFFFF;
  --np-marca-1: #F3B3C6; --np-marca-2: #F7CFDA; --np-marca-3: #DAD6CE; --np-marca-4: #ABE3C5; --np-marca-5: #79D3A2; /* v0.15.0: escala fixa do medidor grande, igual nos dois temas */ --np-sombra: #000000;
  --vt-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(252, 243, 236, 0.42) 0%, rgba(238, 208, 188, 0.52) 62%, rgba(178, 102, 60, 0.50) 100%);
  --vt-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 -1.5px 1px rgba(255, 255, 255, 0.45), inset 0 0 12px rgba(120, 60, 20, 0.22);
  --vt-sombra: 0 0 0 0.5px rgba(80, 40, 10, 0.22), 0 3px 14px rgba(80, 40, 10, 0.16);
  --vt-tinta: #4A2412;
  --vc-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(236, 246, 240, 0.30) 0%, rgba(176, 214, 192, 0.42) 62%, rgba(58, 128, 92, 0.52) 100%);
  --vc-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 -1.5px 1px rgba(255, 255, 255, 0.45), inset 0 0 12px rgba(20, 90, 55, 0.24);
  --vc-tinta: #0D3A26;
  --vc-gravado: 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.7);
  --vc-gravado-icone: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
  --vc-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0) 100%);
  --vv-fundo: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(40, 138, 92, 0.84) 0%, rgba(18, 96, 60, 0.90) 60%, rgba(6, 58, 34, 0.96) 100%);
  --vv-aro: inset 0 0 0 1px rgba(170, 255, 210, 0.35), inset 0 1.5px 1px rgba(255, 255, 255, 0.65), inset 0 -1.5px 1px rgba(160, 255, 205, 0.30), inset 0 0 14px rgba(0, 30, 15, 0.35);
  --vv-tinta: #FFFFFF;
  --vv-gravado: 0 0 2px rgba(255, 255, 255, 0.35), 0 -1px 0 rgba(0, 0, 0, 0.30);
  --vv-gravado-icone: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.35));
  --vv-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0) 100%);
  --vc-sombra: 0 0 0 0.5px rgba(10, 50, 30, 0.22), 0 3px 14px rgba(20, 60, 40, 0.16);
  --vc-lente: blur(3px) saturate(1.7) brightness(1.06);
  /* v0.10.0: vb = bolha do menu (vidro claro, mais transparente que a Tecla); vp = pílula da escolhida
     (verde-escura, sem translucidez); vs = seletor dentro da pílula (claro, como o da barra) */
  --vb-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(236, 246, 240, 0.20) 0%, rgba(176, 214, 192, 0.30) 62%, rgba(58, 128, 92, 0.40) 100%);
  --vb-lente: blur(2px) saturate(1.6) brightness(1.05);
  --vb-gravado: url(#dp-gravado-claro);
  --vb-tinta: rgba(13, 58, 38, 0.62);
  --vp-fundo: linear-gradient(180deg, #1D7C51 0%, #135F3C 55%, #0C4A2E 100%);
  --vp-aro: inset 0 0 0 1px rgba(170, 255, 210, 0.28), inset 0 1.5px 1px rgba(255, 255, 255, 0.45), inset 0 -1.5px 1px rgba(160, 255, 205, 0.20);
  --vp-tinta: #FFFFFF;
  --vs-fundo: radial-gradient(ellipse 80% 90% at 50% 38%, rgba(252, 255, 253, 0.97) 0%, rgba(222, 241, 230, 0.95) 100%);
  --vs-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.90), inset 0 -2px 3px rgba(20, 90, 55, 0.16), 0 1px 4px rgba(0, 30, 15, 0.35);
  --vs-tinta: #0D3A26;
  /* v0.11.0: pílula funda do Segmentado deslizante (sombra por dentro) e sombra do balão da dica; iguais nos dois temas */
  --desliza-sombra: inset 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 0 0 1px var(--linha);
  --dica-sombra: 0 6px 18px rgba(0, 0, 0, 0.22);
  --mola-seletor: cubic-bezier(0.32, 1.25, 0.5, 1);
  --mais-veu: rgba(244, 241, 234, 0.64);
  --mais-vidro: radial-gradient(ellipse 80% 90% at 50% 42%, rgba(18, 96, 60, 0.40) 0%, rgba(14, 86, 52, 0.52) 55%, rgba(6, 58, 34, 0.75) 100%);
  /* iguais nos dois temas: o + fechado fica branco, com halo esmeralda escuro (usado sem o gravado fundo) */
  --mais-nucleo-cor: #FFFFFF;
  --mais-nucleo-halo: drop-shadow(0 0 2px rgba(4, 40, 22, 0.75)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.30));
  --mais-arrasto-sombra: 0 14px 30px rgba(10, 40, 25, 0.35);
  --tecla-selo-sombra: 0 1px 3px rgba(0, 0, 0, 0.20);
  /* domo (v0.10.0 em pílula): sempre sobre a faixa verde, igual nos dois temas */
  --domo-fundo: radial-gradient(ellipse 90% 120% at 50% 50%, rgba(255, 255, 255, 0) 0 50%, rgba(220, 255, 235, 0.10) 80%, rgba(220, 255, 235, 0.24) 100%);
  --domo-aro: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.60), inset 0 -2px 4px rgba(255, 255, 255, 0.28), inset 0 0 12px rgba(0, 30, 15, 0.30), 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  --domo-brilho: radial-gradient(ellipse 60% 30% at 50% 16%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 100%);
  --domo-reflexo: radial-gradient(ellipse 54% 22% at 50% 90%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 100%);
  --domo-desenho: rgba(255, 255, 255, 0.90);
  --domo-desenho-sombra: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 0 rgba(0, 40, 20, 0.35));
  --domo-nome: rgba(255, 255, 255, 0.95);
  --domo-nome-sombra: 0 1px 0 rgba(0, 40, 20, 0.30);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) {
  --np-cor-1: #7A2442; --np-cor-2: #8A3D56; --np-cor-3: #4C4A44; --np-cor-4: #2A6C4B; --np-cor-5: #1C5A3D; --np-texto: #FFFFFF; --np-sombra: #000000;
  --vt-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(200, 140, 100, 0.12) 0%, rgba(170, 105, 65, 0.22) 62%, rgba(222, 142, 92, 0.36) 100%);
  --vt-aro: inset 0 0 0 1px rgba(240, 200, 170, 0.26), inset 0 1.5px 1px rgba(255, 255, 255, 0.40), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.35);
  --vt-sombra: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 3px 14px rgba(0, 0, 0, 0.35);
  --vt-tinta: #F7E7DC;
  --vc-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(120, 190, 155, 0.14) 0%, rgba(80, 150, 115, 0.24) 62%, rgba(110, 200, 155, 0.38) 100%);
  --vc-aro: inset 0 0 0 1px rgba(170, 240, 205, 0.28), inset 0 1.5px 1px rgba(255, 255, 255, 0.42), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.35);
  --vc-tinta: #E6F6EC;
  --vc-gravado: 0 0 3px rgba(0, 0, 0, 0.70);
  --vc-gravado-icone: drop-shadow(0 0 2px rgba(0, 0, 0, 0.70));
  --vc-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 100%);
  --vv-fundo: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(110, 205, 155, 0.88) 0%, rgba(80, 175, 125, 0.92) 60%, rgba(40, 120, 80, 0.96) 100%);
  --vv-aro: inset 0 0 0 1px rgba(200, 255, 225, 0.40), inset 0 1.5px 1px rgba(255, 255, 255, 0.70), inset 0 -1.5px 1px rgba(255, 255, 255, 0.25), inset 0 0 14px rgba(0, 40, 20, 0.35);
  --vv-tinta: #0B1A12;
  --vv-gravado: 0 0 2px rgba(255, 255, 255, 0.45);
  --vv-gravado-icone: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.45));
  --vv-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  --vc-sombra: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 3px 14px rgba(0, 0, 0, 0.35);
  --vc-lente: blur(3px) saturate(1.5) brightness(0.96);
  --vb-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(120, 190, 155, 0.10) 0%, rgba(80, 150, 115, 0.18) 62%, rgba(110, 200, 155, 0.30) 100%);
  --vb-lente: blur(2px) saturate(1.4) brightness(0.96);
  --vb-gravado: url(#dp-gravado-escuro);
  --vb-tinta: rgba(230, 246, 236, 0.60);
  --vp-fundo: linear-gradient(180deg, #2E8A5D 0%, #1F6D47 55%, #165536 100%);
  --vp-aro: inset 0 0 0 1px rgba(200, 255, 225, 0.30), inset 0 1.5px 1px rgba(255, 255, 255, 0.38), inset 0 -1.5px 1px rgba(255, 255, 255, 0.10);
  --vp-tinta: #F2FBF5;
  --vs-fundo: radial-gradient(ellipse 80% 90% at 50% 38%, rgba(222, 246, 232, 0.95) 0%, rgba(186, 228, 204, 0.93) 100%);
  --vs-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.70), inset 0 -2px 3px rgba(0, 40, 20, 0.20), 0 1px 4px rgba(0, 0, 0, 0.50);
  --vs-tinta: #0B1A12;
  --mais-veu: rgba(23, 22, 19, 0.70);
  --mais-vidro: radial-gradient(ellipse 80% 90% at 50% 42%, rgba(70, 170, 120, 0.40) 0%, rgba(55, 150, 102, 0.52) 55%, rgba(40, 130, 85, 0.75) 100%);
} }
[data-theme="escuro"] {
  --np-cor-1: #7A2442; --np-cor-2: #8A3D56; --np-cor-3: #4C4A44; --np-cor-4: #2A6C4B; --np-cor-5: #1C5A3D; --np-texto: #FFFFFF; --np-sombra: #000000;
  --vt-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(200, 140, 100, 0.12) 0%, rgba(170, 105, 65, 0.22) 62%, rgba(222, 142, 92, 0.36) 100%);
  --vt-aro: inset 0 0 0 1px rgba(240, 200, 170, 0.26), inset 0 1.5px 1px rgba(255, 255, 255, 0.40), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.35);
  --vt-sombra: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 3px 14px rgba(0, 0, 0, 0.35);
  --vt-tinta: #F7E7DC;
  --vc-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(120, 190, 155, 0.14) 0%, rgba(80, 150, 115, 0.24) 62%, rgba(110, 200, 155, 0.38) 100%);
  --vc-aro: inset 0 0 0 1px rgba(170, 240, 205, 0.28), inset 0 1.5px 1px rgba(255, 255, 255, 0.42), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.35);
  --vc-tinta: #E6F6EC;
  --vc-gravado: 0 0 3px rgba(0, 0, 0, 0.70);
  --vc-gravado-icone: drop-shadow(0 0 2px rgba(0, 0, 0, 0.70));
  --vc-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 100%);
  --vv-fundo: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(110, 205, 155, 0.88) 0%, rgba(80, 175, 125, 0.92) 60%, rgba(40, 120, 80, 0.96) 100%);
  --vv-aro: inset 0 0 0 1px rgba(200, 255, 225, 0.40), inset 0 1.5px 1px rgba(255, 255, 255, 0.70), inset 0 -1.5px 1px rgba(255, 255, 255, 0.25), inset 0 0 14px rgba(0, 40, 20, 0.35);
  --vv-tinta: #0B1A12;
  --vv-gravado: 0 0 2px rgba(255, 255, 255, 0.45);
  --vv-gravado-icone: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.45));
  --vv-brilho: radial-gradient(ellipse 46% 24% at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  --vc-sombra: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 3px 14px rgba(0, 0, 0, 0.35);
  --vc-lente: blur(3px) saturate(1.5) brightness(0.96);
  --vb-fundo: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(120, 190, 155, 0.10) 0%, rgba(80, 150, 115, 0.18) 62%, rgba(110, 200, 155, 0.30) 100%);
  --vb-lente: blur(2px) saturate(1.4) brightness(0.96);
  --vb-gravado: url(#dp-gravado-escuro);
  --vb-tinta: rgba(230, 246, 236, 0.60);
  --vp-fundo: linear-gradient(180deg, #2E8A5D 0%, #1F6D47 55%, #165536 100%);
  --vp-aro: inset 0 0 0 1px rgba(200, 255, 225, 0.30), inset 0 1.5px 1px rgba(255, 255, 255, 0.38), inset 0 -1.5px 1px rgba(255, 255, 255, 0.10);
  --vp-tinta: #F2FBF5;
  --vs-fundo: radial-gradient(ellipse 80% 90% at 50% 38%, rgba(222, 246, 232, 0.95) 0%, rgba(186, 228, 204, 0.93) 100%);
  --vs-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.70), inset 0 -2px 3px rgba(0, 40, 20, 0.20), 0 1px 4px rgba(0, 0, 0, 0.50);
  --vs-tinta: #0B1A12;
  --mais-veu: rgba(23, 22, 19, 0.70);
  --mais-vidro: radial-gradient(ellipse 80% 90% at 50% 42%, rgba(70, 170, 120, 0.40) 0%, rgba(55, 150, 102, 0.52) 55%, rgba(40, 130, 85, 0.75) 100%);
}
.dp-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-filtros { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tecla: vidro colorido (vidro = verde claro; verde = esmeralda). Nenhuma tecla tem alvo menor que 48 px. */
.dp-tecla { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 0; border-radius: var(--raio-pilula); padding: 0 20px 0 16px; text-decoration: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em; -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--dp-mola-arranque); -webkit-backdrop-filter: var(--vc-lente); backdrop-filter: var(--vc-lente); }
.dp-tecla::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vc-brilho); pointer-events: none; }
.dp-tecla-corpo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.dp-tecla-icone { display: flex; flex: none; }
.dp-tecla-icone .dp-icone { stroke-width: 2.4; }
.dp-tecla-rotulo { white-space: nowrap; }
.dp-tecla:active { transform: scale(0.96); }
.dp-tecla:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.dp-tecla-vidro { background: var(--vc-fundo); box-shadow: var(--vc-aro), var(--vc-sombra); color: var(--vc-tinta); }
.dp-tecla-vidro .dp-tecla-rotulo { text-shadow: var(--vc-gravado); }
.dp-tecla-vidro .dp-tecla-icone { filter: var(--vc-gravado-icone); }
.dp-tecla-verde { background: var(--vv-fundo); box-shadow: var(--vv-aro), var(--vc-sombra); color: var(--vv-tinta); }
.dp-tecla-verde::before { background: var(--vv-brilho); }
.dp-tecla-verde .dp-tecla-rotulo { text-shadow: var(--vv-gravado); }
.dp-tecla-verde .dp-tecla-icone { filter: var(--vv-gravado-icone); }
.dp-tecla-grande { height: 64px; padding: 0 26px 0 20px; font-size: 19px; }
.dp-tecla-media { height: 56px; font-size: 15.5px; padding: 0 14px 0 12px; }
.dp-tecla-media .dp-tecla-corpo { gap: 8px; }
.dp-tecla-normal { height: 52px; font-size: 15px; padding: 0 16px 0 13px; }
.dp-tecla-pequena { height: 48px; padding: 0 14px 0 11px; font-size: 14px; }
.dp-tecla-pequena .dp-tecla-corpo { gap: 6px; }
.dp-tecla-quadrada { width: 64px; height: 64px; padding: 6px 3px 5px; border-radius: 22px; }
.dp-tecla-quadrada .dp-tecla-corpo { flex-direction: column; gap: 3px; }
.dp-tecla-quadrada .dp-tecla-rotulo { white-space: normal; text-align: center; font-size: 11px; line-height: 12px; }
.dp-tecla-cheia { width: 100%; }
.dp-tecla-lugar { position: relative; display: inline-flex; flex: none; }
.dp-tecla-desativada { opacity: var(--opacidade-desativado); cursor: default; pointer-events: none; }
.dp-tecla-selo { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 1px 7px; border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta-suave); font: 700 10.5px/15px var(--font-texto); white-space: nowrap; box-shadow: var(--tecla-selo-sombra), inset 0 0 0 1px var(--linha); pointer-events: none; }

/* o +: um só, fixo, fora das telas. Fechado: esmeralda translúcida de 66 px (v0.10.0; era 60), 14 px acima da barra,
   16 px da borda; sem a barra (Configurações, Veículos, Ajuda) ou com ela encolhida, na linha dela. Aberto: vai para o pé
   (base a 12 px), cresce 45% (--mais-escala) e vira ×, com a mesma cor e o mesmo gravado do + (v0.10.0). */
.dp-mais { position: fixed; inset: 0; z-index: 20; max-width: 520px; margin: 0 auto; pointer-events: none; }
.dp-mais-veu { position: absolute; inset: 0; opacity: 0; visibility: hidden; touch-action: none; background: var(--mais-veu); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); transition: opacity 220ms ease, visibility 0s linear 220ms; }
.dp-mais-aberto .dp-mais-veu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms ease; }
.dp-mais-botao { position: absolute; right: 16px; bottom: calc(var(--altura-nav) + 14px + env(safe-area-inset-bottom)); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; isolation: isolate; overflow: visible; pointer-events: auto; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  background: transparent; box-shadow: var(--vv-aro), var(--vc-sombra); color: var(--mais-nucleo-cor); -webkit-backdrop-filter: blur(5px) saturate(1.6); backdrop-filter: blur(5px) saturate(1.6);
  transition: transform 380ms var(--dp-barra-mola), bottom 380ms var(--dp-barra-mola), background 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.dp-mais-botao::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: var(--vv-brilho); pointer-events: none; }
.dp-mais-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.dp-mais:not(.dp-mais-aberto) .dp-mais-botao:active { transform: scale(0.95); }
/* o + gravado fundo: o sulco é um furo na tinta (máscara), mostra o fundo desfocado; o filtro #dp-gravado-fundo faz a parede na sombra e a borda na luz.
   Aberto, a tinta (com o furo) gira junto com o ícone: o × fica com o mesmo gravado. */
.dp-mais-tinta { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--mais-vidro); pointer-events: none; transition: transform 380ms var(--dp-barra-mola);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 28px 28px no-repeat, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 28px 28px no-repeat, linear-gradient(black, black);
  mask-composite: exclude; }
.dp-mais-nucleo { position: relative; z-index: 1; display: flex; filter: url(#dp-gravado-fundo); }
.dp-mais-nucleo .dp-icone { width: 28px; height: 28px; stroke-width: 3.4; transition: transform 380ms var(--dp-barra-mola); }
.dp-mais-aberto .dp-mais-botao { transform: translate(calc(-33px * (var(--mais-escala) - 1)), calc(111px - 33px * var(--mais-escala))) scale(var(--mais-escala)); }
.dp-mais-aberto .dp-mais-tinta, .dp-mais-aberto .dp-mais-nucleo .dp-icone { transform: rotate(135deg); }
body.barra-encolhida .dp-mais-botao, body.sem-nav .dp-mais-botao { bottom: calc(14px + env(safe-area-inset-bottom)); }
body.barra-encolhida .dp-mais-aberto .dp-mais-botao, body.sem-nav .dp-mais-aberto .dp-mais-botao { transform: translate(calc(-33px * (var(--mais-escala) - 1)), calc(35px - 33px * var(--mais-escala))) scale(var(--mais-escala)); }
/* arrastando: segue o dedo, um pouco maior; solto: fica onde foi solto (fora do canto, não desce com a barra encolhida) */
.dp-mais-arrastando .dp-mais-botao, .dp-mais-solto .dp-mais-botao { right: auto; bottom: auto; }
.dp-mais-arrastando .dp-mais-botao { transform: scale(1.12); box-shadow: var(--vv-aro), var(--mais-arrasto-sombra); transition: none; cursor: grabbing; }
.dp-mais-solto .dp-mais-botao { transition: background 200ms ease, color 200ms ease; }
/* espaço no fim da rolagem para o + não cobrir o último texto */
body.com-mais #app { padding-bottom: calc(var(--altura-nav) + 14px + 66px + 20px + env(safe-area-inset-bottom)); }
body.com-mais.sem-nav #app { padding-bottom: calc(14px + 66px + 20px + env(safe-area-inset-bottom)); }
/* com o menu aberto, a barra (junta) fica nítida por cima do véu */
body.mais-aberto .dp-nav { z-index: 30; }

/* as bolhas (v0.10.0): coluna reta acima do +, centradas nele, diminuindo para cima; vidro claro mais transparente
   que a Tecla (desfoque de 2 px), com o ícone gravado como o +. A escolhida vira pílula verde-escura (abaixo). */
.dp-mais-mestres { position: absolute; left: 16px; right: 16px; bottom: calc(26px + 66px * var(--mais-escala) + env(safe-area-inset-bottom)); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
.dp-mestre { --r: calc(var(--d) / 2); position: relative; display: flex; align-items: center; justify-content: flex-end; height: var(--d); opacity: 0; transform: translateY(26px) scale(0.5); transform-origin: right bottom; transition: opacity 120ms ease, transform 140ms ease; }
.dp-mais-aberto .dp-mestre { opacity: 1; transform: none; pointer-events: auto; transition: opacity 160ms ease calc(var(--i) * 40ms), transform 360ms var(--dp-mola-arranque) calc(var(--i) * 40ms); }
.dp-mestre-fundo { position: absolute; inset: 0; z-index: 0; border-radius: var(--r); background: var(--vb-fundo); box-shadow: var(--vc-aro), var(--vc-sombra); -webkit-backdrop-filter: var(--vb-lente); backdrop-filter: var(--vb-lente); pointer-events: none; }
.dp-mestre-fundo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vc-brilho); }
.dp-mestre-bola { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; width: var(--d); height: var(--d); border-radius: 50%; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.dp-mestre-bola:focus-visible, .dp-mestre-principal:focus-visible, .dp-mestre-opcao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 999px; }
.dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola { color: var(--vb-tinta); }
.dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola .dp-icone { stroke-width: 2.8; filter: var(--vb-gravado); }
/* a escolhida: pílula verde-escura, sem translucidez, da mesma altura da bolha; cresce para a esquerda a partir da bolha */
.dp-mestre-aberto { padding-left: 6px; }
.dp-mestre-aberto .dp-mestre-fundo { background: var(--vp-fundo); box-shadow: var(--vp-aro), var(--vc-sombra); -webkit-backdrop-filter: none; backdrop-filter: none; animation: dp-pilula-abre 300ms var(--dp-mola-arranque) both; }
.dp-mestre-aberto .dp-mestre-fundo::before { background: var(--vv-brilho); opacity: 0.6; }
.dp-mestre-aberto > :not(.dp-mestre-fundo) { animation: dp-pilula-conteudo 220ms ease 90ms both; }
@keyframes dp-pilula-abre { from { clip-path: inset(0 0 0 calc(100% - var(--d)) round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
@keyframes dp-pilula-conteudo { from { opacity: 0; } to { opacity: 1; } }
/* a ação principal: o nome e a bolha, um alvo só, sempre na primeira posição; o ícone vira tinta pintada por cima */
.dp-mestre-principal { position: relative; z-index: 2; flex: none; display: flex; align-items: center; height: 100%; padding-left: 16px; color: var(--vp-tinta); text-decoration: none; transition: color 160ms ease; -webkit-tap-highlight-color: transparent; }
.dp-mestre-rotulo { font: 700 16.5px/20px var(--font-display); white-space: nowrap; }
.dp-mestre-principal .dp-mestre-bola { color: inherit; }
.dp-mestre-principal .dp-mestre-bola .dp-icone { stroke-width: 2.4; filter: none; }
/* as opções, de lado; com mais do que cabe, a seguinte aparece cortada e esmaecida na beirada esquerda ("espiar") */
.dp-mestre-janela { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.dp-mestre-transborda .dp-mestre-janela { -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px); mask-image: linear-gradient(90deg, transparent 0, black 40px); }
.dp-mestre-trilho { position: relative; flex: none; display: flex; flex-direction: row-reverse; align-items: center; gap: 2px; transition: transform 260ms cubic-bezier(0.25, 0.9, 0.3, 1); }
.dp-mestre-arrastando .dp-mestre-trilho { transition: transform 80ms linear; }
.dp-mestre-opcao { position: relative; display: flex; align-items: center; gap: 7px; height: calc(var(--d) - 10px); min-height: 48px; padding: 0 14px; color: var(--vp-tinta); font: 700 14.5px/18px var(--font-display); white-space: nowrap; text-decoration: none; transition: color 160ms ease; -webkit-tap-highlight-color: transparent; }
.dp-mestre-opcao .dp-icone { flex: none; stroke-width: 2.4; }
.dp-mestre-opcao-nome { display: flex; flex-direction: column; }
.dp-mestre-opcao-nome small { font: 600 11px/13px var(--font-texto); opacity: 0.9; }
.dp-mestre-opcao-off { opacity: var(--opacidade-desativado); cursor: default; }
.dp-mestre-sob { color: var(--vs-tinta); }
/* o seletor claro: anda entre as posições como o da barra (mola, desenhada pelo JS), sem lente (a pílula é opaca) */
.dp-mestre-seletor { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--vs-fundo); box-shadow: var(--vs-aro); pointer-events: none; }
.dp-mestre-seletor::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vv-brilho); }
.dp-mestre-arrastando .dp-mestre-seletor { top: 3px; bottom: 3px; }

/* Teclas nos formulários (v0.9.0): Ler print no alto da Nova rota; Ler bomba e Ler hodômetro lado a lado no Novo abastecimento */
.dp-tecla-bloco { display: flex; flex-direction: column; gap: 6px; }
.dp-teclas-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 8px; }
.dp-teclas-2 .dp-tecla-rotulo { overflow: hidden; text-overflow: ellipsis; }

/* Domo (v0.10.0): o botão do veículo no topo do Início, em pílula de vidro transparente com o ícone e o nome dentro.
   Mesmas propriedades da bola da v0.9.0: o fundo passa curvado pela lente (--domo-lente, do JS; só Chromium, sem
   aberração), luz de frente, desenho fosco. */
.dp-domo { display: inline-flex; align-items: center; min-height: 52px; padding: 0; border: 0; background: none; color: var(--sobre-faixa); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-domo-pilula { position: relative; gap: 9px; height: 52px; padding: 0 18px 0 14px; border-radius: 26px; overflow: hidden; isolation: isolate; background: var(--domo-fundo); box-shadow: var(--domo-aro); transition: transform 140ms var(--dp-mola-arranque); }
.dp-domo-pilula::before, .dp-domo-pilula::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; }
.dp-domo-pilula::before { background: var(--domo-brilho); }
.dp-domo-pilula::after { background: var(--domo-reflexo); }
.dp-domo-lente { position: absolute; inset: -16px; z-index: -1; pointer-events: none; -webkit-backdrop-filter: var(--domo-lente, saturate(1.5) brightness(1.12)); backdrop-filter: var(--domo-lente, saturate(1.5) brightness(1.12)); }
.dp-domo-desenho { position: relative; z-index: 1; display: flex; color: var(--domo-desenho); filter: var(--domo-desenho-sombra); }
.dp-domo-desenho .dp-icone { stroke-width: 2.2; }
.dp-domo-legenda { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; font: 600 15px/18px var(--font-texto); color: var(--domo-nome); text-shadow: var(--domo-nome-sombra); }
.dp-domo-legenda small { font: 500 11.5px/14px var(--font-texto); color: var(--sobre-verde-suave); }
.dp-domo:active { transform: scale(0.96); }
.dp-domo:focus-visible { outline: 2px solid var(--sobre-faixa); outline-offset: 3px; border-radius: 28px; }
[data-vidro="sem-desfoque"] .dp-domo-lente { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .dp-domo-lente { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* barra junta: com o + aberto, 200 px (4 abas de 48 px), à esquerda, sem palavra; o seletor e a borda saem durante a mola */
.dp-nav .dp-barra-junta { width: 200px; }
.dp-barra-junta .dp-barra-sob .dp-barra-palavra { opacity: 0; }
.dp-barra-junta .dp-barra-sob .dp-barra-icone { transform: none; }
.dp-barra-junta > .dp-barra-miolo { inset: 10px 12px; }
.dp-barra-mudando .dp-barra-pilula { opacity: 0; transition: opacity 80ms ease; }

/* leve e sem efeito: véu sólido e o vidro não lê o fundo; os ícones das bolhas ficam sem gravado (cor cheia), para não
   somar filtros, e o + e o × continuam gravados (um filtro só). Sem efeito (e "reduzir transparência"): o + também sem o sulco. */
[data-vidro="leve"] .dp-mais-veu, [data-vidro="sem-desfoque"] .dp-mais-veu { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-fundo-tela-solido); }
[data-vidro="leve"] .dp-tecla, [data-vidro="leve"] .dp-mestre-fundo, [data-vidro="leve"] .dp-mais-botao, [data-vidro="sem-desfoque"] .dp-tecla, [data-vidro="sem-desfoque"] .dp-mestre-fundo, [data-vidro="sem-desfoque"] .dp-mais-botao { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-vidro="leve"] .dp-mestre-fundo, [data-vidro="sem-desfoque"] .dp-mestre-fundo { background: var(--vc-fundo); }
[data-vidro="leve"] .dp-mestre-aberto .dp-mestre-fundo, [data-vidro="sem-desfoque"] .dp-mestre-aberto .dp-mestre-fundo { background: var(--vp-fundo); }
[data-vidro="leve"] .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola, [data-vidro="sem-desfoque"] .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola, .dp-mais-sem-gravado .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola { color: var(--vc-tinta); }
[data-vidro="leve"] .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola .dp-icone, [data-vidro="sem-desfoque"] .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola .dp-icone, .dp-mais-sem-gravado .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-bola .dp-icone { filter: none; }
[data-vidro="leve"] .dp-mais-tinta { background: var(--vv-fundo); }
[data-vidro="sem-desfoque"] .dp-mais-tinta { background: var(--vv-fundo); -webkit-mask: none; mask: none; }
[data-vidro="sem-desfoque"] .dp-mais-nucleo, .dp-mais[data-vidro="sem-desfoque"] .dp-mais-nucleo { filter: var(--mais-nucleo-halo); }
@media (prefers-reduced-transparency: reduce) {
  .dp-mais-veu { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-fundo-tela-solido); }
  .dp-tecla, .dp-mestre-fundo, .dp-mais-botao { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dp-mestre:not(.dp-mestre-aberto) .dp-mestre-fundo { background: var(--vc-fundo); }
  .dp-mais-tinta { background: var(--vv-fundo); -webkit-mask: none; mask: none; }
  .dp-mais-nucleo { filter: var(--mais-nucleo-halo); }
}
/* reduzir movimento: sem mola nem escala; tudo só aparece e muda direto (as transições já saem para o app inteiro;
   o seletor da pílula pula para a posição pelo JS) */
@media (prefers-reduced-motion: reduce) {
  .dp-mestre { transform: none; }
  .dp-mestre-aberto .dp-mestre-fundo, .dp-mestre-aberto > :not(.dp-mestre-fundo) { animation: none; }
  .dp-mais-arrastando .dp-mais-botao { transform: none; }
}

/* ===== Barra de abas líquida (v0.8, NavInferior rev. 6) =====
   Barra flutuante em pílula, de vidro transparente sem desfoque, com o conteúdo passando por trás.
   Borda grossa que curva o que está atrás (vidro vivo, .dp-barra-viva, só Chrome/Android) e miolo com tinta.
   O seletor é uma lente: posição e tamanho vêm do JS (abas.js); dentro dele, a cópia das abas curvada
   pelo filtro em --barra-lente; atrás dele, o fundo curvado pelo filtro em --barra-lente-fundo. */
.dp-barra { position: absolute; left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 32px); height: 64px; border-radius: 32px; transition: width 380ms var(--dp-barra-mola), height 380ms var(--dp-barra-mola), bottom 380ms var(--dp-barra-mola), border-radius 380ms var(--dp-barra-mola); }
.dp-barra-corpo { position: absolute; inset: 0; border-radius: inherit; isolation: isolate; -webkit-backdrop-filter: saturate(1.25) brightness(1.02); backdrop-filter: saturate(1.25) brightness(1.02); }
.dp-barra-corpo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(var(--barra-tinta-cor), calc(0.10 + var(--barra-opacidade) * 0.62)), rgba(var(--barra-tinta-cor), calc(0.04 + var(--barra-opacidade) * 0.62))); box-shadow: var(--barra-aro), var(--barra-contorno), var(--barra-sombra); pointer-events: none; }
.dp-barra-viva { -webkit-backdrop-filter: none; backdrop-filter: none; }
.dp-barra-viva::after { content: ""; position: absolute; inset: var(--dp-vidro-recuo, -16px); z-index: -2; -webkit-backdrop-filter: var(--dp-vidro-filtro); backdrop-filter: var(--dp-vidro-filtro); pointer-events: none; }
/* miolo: tinta a mais por dentro da faixa da borda, com a beirada esfumada; a borda continua transparente e curvando o fundo */
.dp-barra-miolo { position: absolute; inset: 10px 14px; border-radius: 22px; background: rgba(var(--barra-tinta-cor), var(--barra-miolo)); filter: blur(5px); pointer-events: none; transition: opacity 140ms ease; }
.dp-barra-encolhida > .dp-barra-miolo { opacity: 0; }
.dp-barra-abas { position: absolute; inset: 0 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); z-index: 1; transition: opacity 140ms ease; }
.dp-barra-aba { position: relative; display: flex; align-items: center; justify-content: center; color: var(--tinta); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.dp-barra-aba:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; border-radius: 28px; }
.dp-barra-icone { display: flex; filter: var(--vidro-halo); transition: transform 320ms var(--dp-barra-mola); }
.dp-barra-icone .dp-icone { stroke-width: 2.1; }
.dp-barra-ativa { color: var(--verde); }
.dp-barra-ativa .dp-barra-icone .dp-icone { stroke-width: 2.5; }
/* a palavra sobe de baixo da barra; fica sob o seletor, então a lente curva ela também (metade dentro, metade fora no movimento) */
.dp-barra-palavra { position: absolute; left: 50%; bottom: 8px; font: 700 11px/14px var(--font-texto); white-space: nowrap; opacity: 0; transform: translate(-50%, 9px) scale(0.92); text-shadow: var(--vidro-texto-sombra); transition: opacity 140ms ease, transform 200ms ease; pointer-events: none; }
.dp-barra-sob .dp-barra-icone { transform: translateY(-7px); }
.dp-barra-sob .dp-barra-palavra { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity 260ms ease 60ms, transform 420ms var(--dp-barra-mola) 40ms; }
/* seletor: lente grossa ("fundo de garrafa") */
.dp-barra-pilula { position: absolute; left: 0; top: 0; width: 84px; height: 56px; border-radius: 999px; z-index: 2; overflow: hidden; touch-action: none; cursor: grab; box-shadow: var(--barra-sel-sombra); transition: opacity 140ms ease; }
.dp-barra-fundo-lente { position: absolute; inset: -16px; pointer-events: none; -webkit-backdrop-filter: var(--barra-lente-fundo, saturate(1.3) brightness(1.03)); backdrop-filter: var(--barra-lente-fundo, saturate(1.3) brightness(1.03)); }
.dp-barra-lente { position: absolute; inset: 0; filter: var(--barra-lente, none); }
.dp-barra-lente-mundo { position: absolute; left: 0; top: 0; }
.dp-barra-abas-copia { pointer-events: none; }
.dp-barra-ativa-sel .dp-barra-pilula { cursor: grabbing; }
/* aro e brilho do vidro grosso, por cima da lente (sem cor) */
.dp-barra-brilho { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--barra-sel-aro); background: var(--barra-sel-tinta), var(--barra-sel-brilho); pointer-events: none; }
.dp-barra-ativa-sel .dp-barra-brilho { background: var(--barra-sel-tinta-ativa), var(--barra-sel-brilho-ativa); }
/* encolhida: pílula pequena com o ícone da aba atual, à esquerda; o + desce para a mesma linha (regras do +, acima) */
.dp-barra-mini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--verde); border-radius: inherit; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 120ms ease; z-index: 3; }
.dp-barra-mini .dp-icone { filter: var(--vidro-halo); stroke-width: 2.5; }
.dp-barra-mini:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-barra-encolhida { width: 72px; height: 60px; bottom: calc(14px + env(safe-area-inset-bottom)); border-radius: 30px; }
.dp-barra-encolhida .dp-barra-abas, .dp-barra-encolhida .dp-barra-pilula { opacity: 0; pointer-events: none; }
.dp-barra-encolhida .dp-barra-mini { opacity: 1; pointer-events: auto; transition: opacity 160ms ease 120ms; }
/* versões de segurança: "sem efeito" (data-vidro="sem-desfoque", e sozinha com "reduzir transparência"):
   tinta sólida, sem refração; seletor verde-suave, sem lente e sem brilho */
[data-vidro="sem-desfoque"] .dp-barra-viva::after, [data-vidro="leve"] .dp-barra-viva::after { display: none; }
[data-vidro="sem-desfoque"] .dp-barra-corpo, [data-vidro="sem-desfoque"] .dp-barra-fundo-lente { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-vidro="sem-desfoque"] .dp-barra-corpo::before { background: var(--vidro-tinta-solida); }
[data-vidro="sem-desfoque"] .dp-barra-pilula { background: var(--verde-suave); box-shadow: none; }
[data-vidro="sem-desfoque"] .dp-barra-brilho, [data-vidro="sem-desfoque"] .dp-barra-miolo { display: none; }
[data-vidro="sem-desfoque"] .dp-barra-lente { filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .dp-nav .dp-barra-viva::after, .dp-nav .dp-barra-brilho, .dp-nav .dp-barra-miolo { display: none; }
  .dp-nav .dp-barra-corpo, .dp-nav .dp-barra-fundo-lente { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dp-nav .dp-barra-corpo::before { background: var(--vidro-tinta-solida); }
  .dp-nav .dp-barra-pilula { background: var(--verde-suave); box-shadow: none; }
  .dp-nav .dp-barra-lente { filter: none; }
}
/* reduzir movimento: sem mola nem transições (a barra também não encolhe e o seletor não vira bolinha: abas.js) */
@media (prefers-reduced-motion: reduce) {
  .dp-nav .dp-barra, .dp-nav .dp-barra *, .dp-nav .dp-barra-sob .dp-barra-palavra { transition: none; }
}

/* ===== Segmentado deslizante (v0.11.0): pílula funda com o seletor claro do + deslizando por dentro =====
   Opaco, sem lente, o mesmo material do seletor do menu do + (--vs-*, brilho --vv-brilho); mola de 300 ms; alvo de 48 px. */
.dp-desliza { touch-action: pan-y; user-select: none; -webkit-user-select: none; position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--superficie-afundada); box-shadow: var(--desliza-sombra); }
.dp-desliza-seletor { position: absolute; z-index: 0; border-radius: 999px; background: var(--vs-fundo); box-shadow: var(--vs-aro); pointer-events: none; }
/* v0.13.0: o seletor anda pela mola em JS (MOLA_SELETOR, mola.js), sem transição no CSS. */
.dp-desliza-seletor::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vv-brilho); }
.dp-desliza-sem { opacity: 0; }
.dp-desliza-opcao { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta-suave); font: 600 15px/18px var(--font-texto); text-align: center; cursor: pointer; transition: color 200ms ease; -webkit-tap-highlight-color: transparent; }
.dp-desliza-opcao span { text-wrap: balance; }
.dp-desliza-sob { color: var(--vs-tinta); }
.dp-desliza-sob { --nota-pessima: var(--sob-seletor-nota-pessima); --nota-ruim: var(--sob-seletor-nota-ruim); --medidor-vazio: var(--sob-seletor-borda); --medidor-vazio-op: 0.55; --verde: var(--sob-seletor-verde); --terroso: var(--sob-seletor-terroso); --tinta: var(--sob-seletor-tinta); --tinta-suave: var(--sob-seletor-suave); --borda-campo: var(--sob-seletor-borda); }
/* Alternador de Análises (v0.13.0, A1): o nome em cima, o medidor e o nível embaixo, sem aumentar a pílula. */
.dp-desliza-pilha { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.dp-desliza-pilha .dp-nota-pequeno { gap: 4px; }
.dp-desliza-pilha .dp-nota-pequeno .dp-medidor { width: 28px; height: 16px; }
.dp-desliza-pilha .dp-nota-pequeno .dp-nota-nome { font: 600 13px/16px var(--font-texto); }
.dp-desliza-opcao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .dp-desliza-opcao { transition: none; } }

/* ===== Dica na hora certa (v0.11.0), presa ao contador: Insucessos numa rota de domingo =====
   Balão escuro acima do campo, por cima da tela (não empurra), com a ponta no contador; some em 6 s ou ao tocar fora. */
.dp-contagem-com-dica { position: relative; }
.dp-dica { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 10px); width: max(100%, 280px); max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--tinta); color: var(--fundo); font: 500 14px/19px var(--font-texto); box-shadow: var(--dica-sombra); animation: dp-dica-entra 160ms ease both; }
.dp-dica .dp-icone { flex: none; margin-top: 1px; }
.dp-dica::after { content: ""; position: absolute; right: 78px; bottom: -6px; width: 12px; height: 12px; background: var(--tinta); transform: rotate(45deg); border-radius: 2px; }
@keyframes dp-dica-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-dica { animation: none; } }

/* ===== Joinha na rota (v0.11.0): abaixo da nota da rota, separado por uma linha fina; o corpo da rota continua um toque só ===== */
.dp-nota-rota-bloco { display: block; padding: 0; }
.dp-nota-rota-dentro { border-top: 0; min-height: 0; }
.dp-joinha { display: flex; flex-direction: column; gap: 10px; margin: 0 16px; padding: 8px 0 14px; border-top: 1px dashed var(--linha); }
.dp-joinha-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-joinha-pergunta { font: 500 14px/19px var(--font-texto); color: var(--tinta-suave); }
.dp-joinha-botoes { display: flex; gap: 8px; flex: none; }
.dp-joinha-botao { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--tinta-suave); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease; }
.dp-joinha-botao:active { transform: scale(0.94); }
.dp-joinha-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-joinha-botao .dp-icone { stroke-width: 2.1; }
.dp-joinha-concordo.dp-joinha-marcado { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.dp-joinha-discordo.dp-joinha-marcado { background: var(--nota-pessima); border-color: var(--nota-pessima); color: var(--sobre-nota); }
.dp-joinha-concordo-ativo .dp-joinha-pergunta, .dp-joinha-discordo-ativo .dp-joinha-pergunta { color: var(--tinta); font-weight: 600; }
.dp-joinha-passos { display: flex; flex-direction: column; gap: 10px; }
.dp-joinha-motivos { display: flex; flex-direction: column; gap: 8px; }
.dp-joinha-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-joinha-direcao { flex-direction: column; }
.dp-joinha-ficha { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: var(--raio-pilula); border: 1.5px solid var(--borda-campo); background: var(--superficie); color: var(--tinta); font: 600 14.5px/18px var(--font-texto); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-joinha-direcao .dp-joinha-ficha { justify-content: flex-start; }
.dp-joinha-ficha-on { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.dp-joinha-ficha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-joinha-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 14px/19px var(--font-texto); color: var(--tinta); }
.dp-joinha-acoes { display: flex; flex: none; margin-left: auto; }
.dp-joinha-texto { min-height: 48px; padding: 0 10px; border: 0; background: transparent; color: var(--verde); font: 600 15px/20px var(--font-texto); cursor: pointer; }
.dp-joinha-texto:last-child { margin-right: -10px; }
.dp-joinha-texto:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; border-radius: 10px; }
.dp-joinha-nota { margin: -6px 0 0; }
@media (prefers-reduced-motion: reduce) { .dp-joinha-botao { transition: none; } .dp-joinha-botao:active { transform: none; } }

/* ===== Avaliação em Análises (v0.11.0): alternador, NotaPeriodo, DistribuicaoNotas e medidor nas listas =====
   Sistema de design v89. Cores só pelos tokens (--np-cor-1 a 5, --np-texto, --np-sombra e os do tema). */
.dp-alternador .dp-desliza-opcao { padding: 10px 12px; }
.dp-item .dp-nota-nivel { flex: none; }
.dp-item-botao { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.dp-item-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.dp-np { --np-cor: var(--np-cor-3); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px 16px; border-radius: var(--raio-destaque); background: radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in srgb, var(--np-texto) 16%, transparent), transparent 60%), linear-gradient(180deg, var(--np-cor) 0%, color-mix(in srgb, var(--np-cor) 82%, var(--np-sombra)) 100%); color: var(--np-texto); box-shadow: 0 6px 20px color-mix(in srgb, var(--np-cor) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--np-texto) 22%, transparent); overflow: hidden; }
.dp-np-topo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dp-np-rotulo { font: 500 13.5px/18px var(--font-texto); color: color-mix(in srgb, var(--np-texto) 86%, transparent); }
.dp-np-etiqueta { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--np-texto) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-texto) 28%, transparent); font: 600 12px/18px var(--font-texto); color: var(--np-texto); }
.dp-mg { display: block; width: 236px; max-width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.dp-mg-marca { fill: none; stroke: color-mix(in srgb, var(--np-texto) 24%, transparent); stroke-width: 16; }
.dp-mg-n1 { stroke: var(--np-marca-1); } .dp-mg-n2 { stroke: var(--np-marca-2); } .dp-mg-n3 { stroke: var(--np-marca-3); } .dp-mg-n4 { stroke: var(--np-marca-4); } .dp-mg-n5 { stroke: var(--np-marca-5); }
.dp-mg-ponteiro line { stroke: var(--np-texto); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--np-sombra) 30%, transparent)); }
.dp-mg-ponteiro circle { fill: var(--np-texto); filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--np-sombra) 30%, transparent)); }
.dp-mg-ponteiro .dp-mg-centro { fill: var(--np-cor); filter: none; }
.dp-np-nome { margin-top: -10px; font: 700 44px/48px var(--font-display); letter-spacing: -0.01em; color: var(--np-texto); text-shadow: 0 1px 0 color-mix(in srgb, var(--np-sombra) 18%, transparent); }
.dp-np-motivos { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.dp-np-trilho { align-self: stretch; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.dp-np-trilho::-webkit-scrollbar { display: none; }
.dp-np-trilho:focus-visible { outline: 2px solid var(--np-texto); outline-offset: -2px; }
.dp-np-motivo { flex: 0 0 86%; scroll-snap-align: center; box-sizing: border-box; min-height: 60px; display: flex; align-items: center; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--np-texto) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-texto) 20%, transparent); font: 500 15px/21px var(--font-texto); color: var(--np-texto); }
.dp-np-motivo:only-child { flex-basis: 100%; }
.dp-np-pontos { display: flex; gap: 6px; }
.dp-np-ponto { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--np-texto) 38%, transparent); transition: width 200ms ease, background 200ms ease; }
.dp-np-ponto-atual { width: 16px; background: var(--np-texto); }
.dp-np-comparacao { align-self: stretch; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--np-texto) 24%, transparent); text-align: center; font: 600 14px/20px var(--font-texto); color: color-mix(in srgb, var(--np-texto) 92%, transparent); }

.dp-distrib-cartao { display: flex; flex-direction: column; gap: 14px; }
.dp-distrib-barra { display: flex; gap: 3px; height: 18px; }
.dp-distrib-parte { min-width: 8px; border-radius: 4px; }
.dp-distrib-parte:first-child { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.dp-distrib-parte:last-child { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.dp-distrib-pessima { background: var(--nota-pessima); }
.dp-distrib-ruim { background: color-mix(in srgb, var(--nota-ruim) 70%, var(--superficie)); }
.dp-distrib-ok { background: color-mix(in srgb, var(--tinta) 26%, var(--superficie)); }
.dp-distrib-boa { background: color-mix(in srgb, var(--verde) 55%, var(--superficie)); }
.dp-distrib-otima { background: var(--verde); }
.dp-distrib-legenda { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.dp-distrib-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.dp-distrib-marca { width: 18px; height: 4px; border-radius: 2px; margin-bottom: 5px; }
.dp-distrib-n { font: 700 22px/26px var(--font-display); font-variant-numeric: tabular-nums; color: var(--tinta); }
.dp-distrib-nome { font: 600 12.5px/16px var(--font-texto); color: var(--tinta-suave); white-space: nowrap; }
.dp-distrib-zero .dp-distrib-n { color: var(--tinta-suave); font-weight: 600; }
.dp-distrib-zero .dp-distrib-marca { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .dp-np-ponto { transition: none; } .dp-np-trilho { scroll-behavior: auto; } }

/* ---------- v0.12.0: semanas recolhíveis (Lançamentos > Rotas) ---------- */
.dp-semana { display: flex; flex-direction: column; gap: 12px; }
.dp-semana-cabeca { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 12px 12px 16px; border: 0; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-semana-cabeca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-semana-textos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dp-semana-titulo { font: 600 17px/22px var(--font-display); }
.dp-semana-detalhe { font: 400 14px/19px var(--font-texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dp-semana-seta { flex: none; display: inline-flex; color: var(--tinta-suave); transition: transform 220ms var(--mola-seletor); }
.dp-semana-aberta .dp-semana-seta { transform: rotate(180deg); }
.dp-semana-dias { display: flex; flex-direction: column; gap: 16px; margin-left: 4px; padding-left: 10px; border-left: 2px solid var(--linha); }
.dp-semana-dias .dp-lista-titulo-dia > span:first-child { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dp-semana-seta { transition: none; } }

/* ---------- v0.12.0: cartão do consumo (Lançamentos > Abastecimentos), vidro claro das bolhas do + ---------- */
.dp-consumo { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--raio-cartao); background: var(--vc-fundo); box-shadow: var(--vc-aro), var(--vc-sombra); color: var(--vc-tinta); overflow: hidden; isolation: isolate; }
.dp-consumo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vc-brilho); pointer-events: none; }
.dp-consumo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dp-consumo-rotulo { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--font-texto); }
.dp-consumo-periodo { font: 500 13px/18px var(--font-texto); opacity: 0.8; }
.dp-consumo-medias { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dp-consumo-duas { grid-template-columns: 1fr 1fr; }
.dp-consumo-duas .dp-consumo-media + .dp-consumo-media { padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.dp-consumo-media { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-consumo-comb { font: 600 13px/18px var(--font-texto); opacity: 0.85; }
.dp-consumo-valor { font: 700 34px/40px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dp-consumo-duas .dp-consumo-valor { font-size: 28px; line-height: 34px; }
.dp-consumo-unid { font: 600 16px/20px var(--font-texto); }
.dp-consumo-custo { font: 500 15px/20px var(--font-texto); font-variant-numeric: tabular-nums; }
.dp-consumo-nota { font: 400 13px/18px var(--font-texto); opacity: 0.8; }
.dp-consumo-vazio { margin: 0; font: 500 15px/21px var(--font-texto); }
.dp-consumo-ultimo { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.dp-consumo-ultimo-titulo { font: 600 13px/18px var(--font-texto); opacity: 0.85; }
.dp-consumo-ultimo-linha { font: 400 14px/20px var(--font-texto); font-variant-numeric: tabular-nums; }
.dp-consumo-ajuda { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: -8px 0 -14px; color: inherit; font: 600 14px/18px var(--font-texto); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.dp-desliza-opcao .dp-icone { flex: none; }

/* Cartões de gráfico recolhíveis (v0.12.0, Resumo 44): título dentro, cabeçalho de 48 px com a seta;
   recolhido, o melhor e o pior do período. Volume e Indicadores continuam com o título fora. */
.dp-recolhivel-cabeca { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: -8px 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-recolhivel-cabeca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-campo); }
.dp-recolhivel-titulo { flex: 1; min-width: 0; font: 600 17px/22px var(--font-display); }
.dp-recolhivel-seta { flex: none; display: inline-flex; color: var(--tinta-suave); transition: transform 220ms var(--mola-seletor); }
.dp-recolhivel-aberto .dp-recolhivel-seta { transform: rotate(180deg); }
.dp-recolhivel-resumo { display: flex; flex-direction: column; gap: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-recolhivel-linha { display: flex; gap: 10px; margin: 0; font: 400 14px/20px var(--font-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.dp-recolhivel-rotulo { flex: none; min-width: 48px; font-weight: 600; color: var(--tinta-suave); }
.dp-recolhivel-vazio { color: var(--tinta-suave); }
.dp-recolhivel-corpo { display: flex; flex-direction: column; gap: var(--espaco-3); }
@media (prefers-reduced-motion: reduce) { .dp-recolhivel-seta { transition: none; } }
/* Respiro entre a alternância e o primeiro dado (Resumo 44): +10 px nos Pontos, +8 px na LinhaDoTempo. */
.dp-barras .dp-segmentado + .dp-barras-lista, .dp-barras .dp-segmentado + .dp-grafico-vazio { margin-top: 10px; }
.dp-tempo-area { margin-top: 48px; }

/* ===== v0.13.0: cartão do custo fixo (aba Custos): o vidro do cartão do consumo tingido de terroso (--vt-*) ===== */
.dp-cfc { background: var(--vt-fundo); box-shadow: var(--vt-aro), var(--vt-sombra); color: var(--vt-tinta); }
.dp-cfc-recolhivel { padding: 0; }
.dp-cfc-toque { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 16px; box-sizing: border-box; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-cfc-toque:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
.dp-cfc-topo-dir { display: inline-flex; align-items: center; gap: 6px; }
.dp-cfc-seta { transition: transform 220ms var(--mola-seletor); }
.dp-cfc-aberto .dp-cfc-seta { transform: rotate(180deg); }
.dp-cfc-pesos { display: flex; flex-direction: column; gap: 8px; }
.dp-cfc-pesos[hidden], .dp-cfc [data-cfc-so-aberto][hidden] { display: none; }
.dp-cfc-barra { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.dp-cfc-barra span { display: block; height: 100%; background: currentColor; }
.dp-cfc-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13px/18px var(--font-texto); font-variant-numeric: tabular-nums; }
.dp-cfc-legenda i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: currentColor; vertical-align: 1px; }
.dp-cfc-vazio-texto { font: 400 14px/20px var(--font-texto); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .dp-cfc-seta { transition: none; } }

/* ===== v0.14.0: "Outro" com texto no joinha, MotivoFichas e de onde veio o valor (sistema de design v96) ===== */
.dp-joinha-outro { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dp-joinha-outro-caixa { display: flex; }
.dp-joinha-outro-caixa input { flex: 1; min-width: 0; height: var(--altura-campo); box-sizing: border-box; padding: 0 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--raio-campo); background: var(--superficie); color: var(--tinta); font: 500 16px/22px var(--font-texto); }
.dp-joinha-outro-caixa input::placeholder { color: var(--tinta-suave); opacity: 0.75; }
.dp-joinha-outro-caixa input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dp-joinha-outro-pe { display: flex; align-items: center; justify-content: space-between; }
.dp-joinha-contador { font: 500 12px/16px var(--font-texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-motivo-fichas { gap: 8px; }
.dp-motivo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dp-com-origem { position: relative; min-width: 0; }
.dp-origem { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; font: 500 12px/16px var(--font-texto); color: var(--tinta-suave); pointer-events: none; }
.dp-origem .dp-icone { color: var(--verde); }
.dp-motivo-recusa { color: var(--tinta); }

/* ===== v0.15.0: comparação em barras horizontais (Por dia da semana, Por cidade), DS v98 forma A ===== */
.dp-hbarras-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dp-hbarras-item { display: grid; grid-template-columns: var(--hb-rot, 44px) 1fr 84px; align-items: center; gap: 10px; min-height: 32px; font: 500 14px/18px var(--font-texto); }
.dp-hbarras-rotulo { font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-hbarras-trilho { position: relative; height: 14px; border-radius: 999px; background: var(--superficie-afundada); overflow: hidden; }
.dp-hbarras-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--verde) 45%, var(--superficie)); }
.dp-hbarras-melhor .dp-hbarras-barra { background: var(--verde); }
.dp-hbarras-neg .dp-hbarras-barra { background: color-mix(in srgb, var(--terroso) 60%, var(--superficie)); }
.dp-hbarras-valor { text-align: right; font: 600 14px/18px var(--font-texto); font-variant-numeric: tabular-nums; color: var(--tinta); }
.dp-hbarras-melhor .dp-hbarras-valor { color: var(--verde); }
.dp-hbarras-vazio .dp-hbarras-rotulo, .dp-hbarras-vazio .dp-hbarras-valor { color: var(--tinta-suave); font-weight: 500; }
.dp-hbarras-vazio .dp-hbarras-trilho { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); }
.dp-hbarras-sem { position: absolute; left: 10px; top: -2px; font: 500 12px/18px var(--font-texto); color: var(--tinta-suave); }