/* ============================================================================================================
   VISUAL NOVO (12/11/2026, aprovado pelo dono no protótipo "DFPet com o visual novo")
   Segue a skill apple-design: fonte do aparelho (SF Pro no iPhone), fundo cinza neutro sem creme, títulos
   grandes com letras mais juntas, UMA cor só para tudo que se toca (botões, ícones, links, selecionado),
   cor só para situação (vermelho vencido, verde pago, laranja atenção), dourado só na marca e no Clube,
   barras de cima e de baixo translúcidas e toque que responde quando o dedo encosta. Só modo claro.
   Carrega DEPOIS do dfpet-ui.css (base.html) e vale para celular e computador.
   ============================================================================================================ */
:root {
  --bg: #F2F2F7;                       /* cinza agrupado do iPhone (antes: creme/cinza-quente) */
  --sunken: #F7F7FA;                   /* cabeçalho de tabela, hover */
  --muted: #5E6272;                    /* texto de apoio */
  --line: rgba(60, 60, 67, .14);
  --hair: rgba(60, 60, 67, .08);
  --tinta: #1B2B6B;                    /* a cor de tudo que se toca */
  --tinta-forte: #13204F;
  --tinta-fundo: rgba(118, 118, 128, .12);   /* sem tom pastel (pedido do dono): fundo de selecionado/ícone é cinza neutro */
  --preench: rgba(118, 118, 128, .12);      /* o cinza de preenchimento do iPhone, no lugar de todo fundo pastel */
  --green-soft: var(--preench); --red-soft: var(--preench); --gold-soft: var(--preench);
  /* balões de situação: cor forte com texto branco (nada de verde-claro, rosa-claro, amarelo-claro) */
  --bal-ok-bg: #1E9E52; --bal-ok-tx: #FFFFFF; --bal-at-bg: #D2433A; --bal-at-tx: #FFFFFF; --bal-de-bg: #C77C02; --bal-de-tx: #FFFFFF; --bal-borda: 0px;
  --marca: #0A1130;                    /* o azul-marinho da marca (logo, cartão de destaque) */
  --ouro-texto: #8A6410;               /* dourado legível em fundo claro (Clube, vendas do mês) */
  --verde-st: #1E9E52; --vermelho-st: #D2433A; --laranja-st: #C77C02;
  --red: #C23B32;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --h-control: 36px;
  --vidro: rgba(249, 249, 251, .82);
}

/* ---------- texto ---------- */
body { -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
h1, .h1 { font-weight: 700; letter-spacing: -0.024em; line-height: 1.12; text-wrap: balance; }
h2 { font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; }
h3, .cartao-titulo, .folha-titulo { font-weight: 600; letter-spacing: -0.01em; }
/* nada de RÓTULOS EM MAIÚSCULAS ESPAÇADAS (a cara de IA): o rótulo vira texto normal, pequeno e semi-negrito */
.rotulo,
.linha.cab,
.tabela-nova th,
.tabela-nova.chave-valor td:first-child,
.selo,
.produto-sem-foto,
.sidebar-grupo,
.sidebar-rotulo,
.folha-secao,
.at-vencido-rotulo,
.rt-rotulo,
.rt-cab-titulo,
.ini-hero-rotulo,
.ini-parada-selo,
.obj-label,
.pt-clube-rotulo,
.secao-tela,
.car-clube-rotulo,
.produto-card .produto-foto-placeholder,
.me-resumo .l,
.sd-saldo small,
.tdet-meta dt,
.iv-resumo > small,
.loja-campanha-rotulo,
.loja-clube-rotulo,
.campanha-faixa-eyebrow,
.lg-eyebrow,
.faixa-config-titulo,
.categoria-titulo-config,
.tc-vip,
.car-vip,
.pt-so-vip,
.cv-membro-clube small,
.cv-membro-lin3 b,
.cv-kpi .l,
.cv-tag,
.cv-selo,
table.empilhavel td::before,
.tabela.tabela-empilha .linha:not(.cab) > *::before,
.msg-meta dt,
.etiqueta-meio,
.msg-grupo-nome,
.rv-qtd small,
.car-estoque-cab,
.tabela-checkout-itens th,
.resumo-total .linha-r > span:first-child,
.resumo-total .linha-r > label,
.car-totais-rot,
.car-colunas,
.es-54.es-54.es-54:not(#_),
.es-88.es-88.es-88:not(#_),
.es-117.es-117.es-117:not(#_),
.es-134.es-134.es-134:not(#_),
.es-156.es-156.es-156:not(#_),
.es-160.es-160.es-160:not(#_),
.fc-6.fc-6.fc-6:not(#_),
.fc-17.fc-17.fc-17:not(#_),
.fc-65.fc-65.fc-65:not(#_),
.fc-79.fc-79.fc-79:not(#_),
.fc-92.fc-92.fc-92:not(#_),
.pd-6.pd-6.pd-6:not(#_),
.pd-12.pd-12.pd-12:not(#_),
.pd-31.pd-31.pd-31:not(#_),
.pd-42.pd-42.pd-42:not(#_),
.en-12.en-12.en-12:not(#_),
.en-17.en-17.en-17:not(#_),
.en-30.en-30.en-30:not(#_),
.en-35.en-35.en-35:not(#_),
.en-49.en-49.en-49:not(#_),
.en-56.en-56.en-56:not(#_),
.cm-4.cm-4.cm-4:not(#_),
.cm-9.cm-9.cm-9:not(#_),
.cp-8.cp-8.cp-8:not(#_),
.ob-13.ob-13.ob-13:not(#_),
.ob-57.ob-57.ob-57:not(#_),
.ob-90.ob-90.ob-90:not(#_),
.ob-99.ob-99.ob-99:not(#_),
.rp-4.rp-4.rp-4:not(#_),
.rp-9.rp-9.rp-9:not(#_),
.rp-24.rp-24.rp-24:not(#_),
.rp-78.rp-78.rp-78:not(#_),
.rp-102.rp-102.rp-102:not(#_),
.rp-104.rp-104.rp-104:not(#_),
.oc-8.oc-8.oc-8:not(#_),
.oc-25.oc-25.oc-25:not(#_),
.oc-44.oc-44.oc-44:not(#_),
.oc-66.oc-66.oc-66:not(#_),
.oc-81.oc-81.oc-81:not(#_),
.pnd-ord,
.pa-3.pa-3.pa-3:not(#_),
.pa-12.pa-12.pa-12:not(#_),
.ge-8.ge-8.ge-8:not(#_),
.fat-rotulo,
.fat-tabela th,
.fat-ficha-rot,
.fat-obs-rot,
.fat-itens-ed td[data-rot]::before,
.fat-sec-tit,
.pv-kpi span,
.vo-kpi span,
.oc-forma-titulo,
.oc-clube-rotulo,
.oc-troca-nome,
.cc-titulo,
.cs-r,
.vis-sub,
.vis-rotulo,
.vis-sec,
.vis-tabela th,
.promo-faixa-eyebrow,
.nfx-sub,
.cp-grupo .rotulo,
.ig-banner-eyebrow,
.ig-destaque-eyebrow,
.igb-letra,
.ia-hero-rotulo,
.emp-num,
.ac-grupo,
.cp-rot,
.fp-resumo-rotulo,
.fp-mes,
.pp-lado-titulo,
.tabela-parcelas-preview th,
.pp-tabela-lado th,
.ck-clube-rot,
.ra-dado small,
.jx-cab,
.ct-cert small,
.jc-valor small,
.jc-rot,
.da-tile small,
.da-grupo,
.prc-selo,
.prc-sem-foto,
.prc-clube small,
.fcm-num small,
.ck-hist-tit,
.cnh-selo,
.cnh-lemb-olho,
.cnh-lemb-nums small,
.cxp-olho,
.cxp-tri small,
.cxp-grupo h2,
.mc-b-cor,
.vsv-tit,
.ck-prazo-cliente,
.ck-ultimas-tit,
.cc-teste,
.ns-rot,
.fc-topo-nums span,
.bc-rotulo,
.pof-res small,
.pof-box h5,
.pof-painel h4,
.ri-valor > small,
.rotulo-mono,
.categoria-titulo,
.tabela-carrinho th,
.tabela-pedidos th,
.tabela-atencao th,
.cor-input-wrap input[type="text"],
.scan-label,
.stat-estoque .l,
.bp-cartao-contado-label,
.resumo-atraso-mob .rotulo,
.cpt-rotulo,
.cf-vencido-rotulo,
.om-label,
.rm-rotulo,
.rm-itinerario-cab > span,
.pm-rotulo,
.pm-kpi-rotulo,
.kpi-rotulo,
.mov-cab,
.tabela-cartao .linha-cab,
.iv-hero-rotulo,
.iv-selo,
.p360-folha-linha .rotulo,
.p360-hero .rotulo,
.p360-l-fazer b,
.p360-tag,
.p360-dica b,
.p360-linha.cab,
.p360-subfiltros .rotulo,
.mp-linha.mp-cab,
.mp-rot { text-transform: none !important; letter-spacing: -0.003em !important; font-weight: 600; }
.rotulo, .folha-secao { font-size: var(--fs-2, 13px); color: var(--muted); }

/* ---------- tudo que se toca: uma cor só ---------- */
a { color: var(--tinta); }
.btn-ouro, .btn-verde, .btn-escuro { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 600; }
.btn-ouro:hover, .btn-verde:hover, .btn-escuro:hover { background: var(--tinta-forte); filter: none; color: #fff; }
.btn-linha { background: var(--surface); color: var(--tinta); border-color: var(--line); font-weight: 600; }
.btn-linha:hover { border-color: var(--tinta); color: var(--tinta); }
.btn-tracejado { color: var(--tinta); border-color: var(--tinta); }
.btn-tracejado:hover { background: var(--tinta-fundo); }
.btn-icone, .btn-acao { color: var(--tinta); }
.btn-icone:hover, .btn-acao:hover { border-color: var(--tinta); color: var(--tinta); }
.btn-icone.ativo { background: var(--tinta-fundo); border-color: var(--tinta); color: var(--tinta); }
.btn-link { color: var(--tinta); }
.btn-perigo { background: var(--preench); color: var(--vermelho-st); }
.btn-perigo:hover { background: var(--vermelho-st); color: #fff; }
/* o compartilhar do WhatsApp continua verde (é a cor do WhatsApp, não uma ação do app) */
.btn-compartilhar { background: #25A55F; border-color: #25A55F; }
.btn { font-weight: 600; letter-spacing: -0.005em; }

/* toque: responde quando o dedo encosta (skill apple-design, §1) */
.btn, .btn-icone, .btn-acao, .chip, .barra-inferior a, .mais-item, .folha-item, .tc-btn-carrinho, .tc-btn-sino, .linha-clicavel, .p360-fbtn {
  transition: transform 100ms ease-out, background-color 120ms ease-out;
}
.btn:active, .btn-icone:active, .btn-acao:active, .chip:active, .barra-inferior a:active, .mais-item:active, .folha-item:active,
.tc-btn-carrinho:active, .tc-btn-sino:active, .p360-fbtn:active { transform: scale(.97); }

/* filtros (botão de grupo que abre o balão): pílula branca com a cor de toque; escolhido = cheio */
.chip { color: var(--tinta); font-weight: 600; }
.chip.ativo, .p360-fbtn.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip.ativo b, .p360-fbtn.ativo b { color: #fff; }

/* selecionado (menu, abas): fundo cinza neutro com a cor de toque no texto (sem pastel) */
:root { --sel-bg: var(--tinta-fundo); --sel-tx: var(--tinta); --sel-borda: var(--tinta); }

/* ---------- cartões: brancos sobre o cinza, sem contorno ---------- */
.cartao { border-color: transparent; box-shadow: var(--shadow); }
.cartao-cab { border-bottom-color: var(--hair); }

/* ---------- topo: vidro claro, logo num quadradinho azul-marinho (como ícone de app) ---------- */
.topo-cliente {
  background: var(--vidro); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.tc-selo { background: var(--marca); padding: 6px 8px; border-radius: 10px; height: 40px; box-sizing: border-box; }
.tc-pontos { color: var(--muted); }
.tc-pontos strong { color: var(--ouro-texto); font-weight: 700; font-family: var(--font-sans); letter-spacing: -0.01em; }
.tc-pontos svg { color: var(--ouro-texto); }
.tc-link-entrar { color: var(--tinta); }
.topo-cliente .tc-btn-carrinho { background: var(--tinta-fundo); color: var(--tinta); border-radius: 999px; }
.tc-btn-visita { border-color: var(--line); color: var(--tinta); }
.tc-btn-visita:hover { border-color: var(--tinta); color: var(--tinta); }
.tc-pedido, .tc-pedido-cli { color: var(--ink); }
@media (max-width: 900px) {
  .tc-selo { height: 34px; padding: 5px 7px; border-radius: 9px; }
  .tc-btn-carrinho { border-radius: 50%; }
}

/* ---------- barra de baixo do celular: vidro claro, só o ícone e o nome mudam de cor ---------- */
.barra-inferior {
  background: var(--vidro); border-top: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.barra-inferior a { color: #8E92A3; font-weight: 600; letter-spacing: .005em; }
.barra-inferior a.ativo { background: transparent; color: var(--tinta); }

/* ---------- barra lateral do computador e folha "Mais" do celular: claras, com o selecionado na cor de toque ----------
   Fica no :root (não só na .sidebar): o menu Mais também usa estas cores, e assim a cor escolhida em
   Configurações → Visual (o <style id="tema-override">, que vem depois) continua valendo. */
:root { --sb-bg: #FBFBFD; --sb-texto: var(--ink); --sb-grupo: var(--muted); --sb-hover: rgba(60, 60, 67, .06); --sb-linha: var(--hair); --sb-borda: var(--hair); --sb-titulo: var(--muted); --sb-perigo: var(--vermelho-st); }

/* ---------- folha que sobe (Mais, filtros): cantos maiores, pegador do iPhone ---------- */
.folha { border-radius: 22px 22px 0 0; overscroll-behavior: contain; }   /* rolar até o fim da folha não arrasta a tela de trás */
.folha-alca { width: 38px; height: 5px; background: #D1D1D6; border-radius: 3px; }
.folha-fundo { background: rgba(10, 17, 48, .32); }
.mais-sigla { background: var(--tinta-fundo); color: var(--tinta); }

/* a faixa de cima da folha: é por ela que se arrasta (folha-mola.js) */
.folha-pegador { height: 26px; margin: -8px -14px 4px; display: grid; place-items: center; touch-action: none; cursor: grab;
  /* fica grudado no alto mesmo com a folha rolada até o fim: dá sempre para pegar e arrastar */
  position: sticky; top: -8px; z-index: 2; background: inherit; border-radius: inherit; }
.folha-pegador::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: #D1D1D6; }
.folha-pegador + .folha-alca { display: none; }
.folha { will-change: transform; }

/* celular: o balão de filtro vira a folha que sobe de baixo (com o fundo escurecido) */
@media (max-width: 900px) {
  .folha-filtro {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    min-width: 0 !important; max-width: none !important; width: auto !important; max-height: 82vh; overflow-y: auto;
    z-index: 86; border: 0; border-radius: 22px 22px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px -20px rgba(10, 17, 48, .45); will-change: transform;
  }
  .folha-filtro .folha-pegador { margin: -8px -16px 4px; flex: 0 0 100%; }
  .folha-fundo-filtro { z-index: 85; }
}

/* ---------- tabelas: cabeçalho discreto ---------- */
.tabela-nova thead th, table thead th { color: var(--muted); font-weight: 600; }


/* ---------- o dourado deixa de ser a cor de ação (gerado em 12/11/2026 a partir das folhas de estilo) ----------
   --gold, --gold-soft e --gold-ink passam a ser a cor de toque; o dourado de verdade fica em --ouro, só para a marca e o Clube. */
html:root { --ouro: #E8B33C; --ouro-suave: var(--preench); --gold: var(--tinta); --gold-soft: var(--tinta-fundo); --gold-ink: var(--tinta); }
/* onde o texto era escuro sobre o dourado, agora é branco sobre a cor de toque */
.btn-ouro,
.parada-num.atual,
.res-btn,
.rt-btn-comecar,
.ini-parada-selo,
.cat-fechar,
.btn-resgatar,
.btn-add-inicial:hover,
.cad-btn-salvar,
.iv-b-ouro,
.loja-btn-carrinho,
.rc-btn,
.tc-btn-carrinho,
.lg-btn-entrar,
.car-reservas-n,
.cp-41.cp-41.cp-41:not(#_),
.vo-sinal.off,
.vo-faixa-offline a,
.oc-troca-btn,
.cc-btn-prim,
.msg-btn[aria-expanded="true"] .msg-i,
.lc-pedido,
.ag-atalho-ic,
.sidebar .sidebar-rodape .perfil-bolinha,
.cf-sel-barra .cf-btn-pagar,
.prc-selo,
.btn.mc-b-pedido,
.rsm-g-enc,
.ob-sug-usar:hover,
.ns-b-loja,
.btn.btn-ouro,
.flash-warning::before,
.flash-aviso::before,
.cmx-sel .cmx-marca,
.cmx-modo-sel .cmx-sel .cmx-marca,
.es-36.es-36.es-36.es-btn-ouro:not(#_),
button,
.btn-primario,
.chip-ativo,
.chip-ativo:hover,
.btn-info-titulo:hover,
.btn-info-titulo.ativo,
.btn-info-inline:hover,
.btn-icone-tooltip:hover,
.chat-fab,
.chat-msg-user,
.chat-input-row button,
.cart-fab-badge,
.estado-erro .acao,
.estado-vazio .acao,
.camera-zoom-btn.ativo,
.p360-plano:hover,
.navbar-mobile .nav-badge,
.tabela-atencao td:nth-child(6) .btn-outline,
.barra-carrinho-mobile,
.selo-dourado,
.sugestao .n { color: #fff; }
/* marca e Clube continuam dourados */
.num-pontos { color: var(--ouro-texto); }
.selo-ouro { background: var(--ouro); }
.kpi-escuro .kpi-valor { color: var(--ouro); }
.trilho > span { background: var(--ouro); }
.badge-promo { background: var(--ouro); }
.campanhas-faixa-trilho { color: var(--ouro-texto); }
.saldo-grande { color: var(--ouro); }
.ini-hero-valor { color: var(--ouro); }
.pa-rank-pos { background: var(--ouro); color: var(--marca); }
.pa-rank-barra { background: var(--ouro); }
.obj-premio { color: var(--ouro-texto); }
.badge-promo { background: var(--ouro); color: var(--marca); }
.pt-clube-saldo { color: var(--ouro); }
.pt-premio-custo { color: var(--ouro-texto); }
.pt-btn-resgatar { background: var(--ouro); }
.pt-extrato-link { color: var(--ouro-texto); }
.car-clube-saldo { color: var(--ouro); }
.car-troca-item-ativo { border-color: var(--ouro); }
.car-troca-custo { color: var(--ouro); }
.car-troca-btn { background: var(--ouro); }
.car-linha-premio { background: var(--ouro-suave); }
.car-premio-selo { color: var(--ouro-texto); }
.premio-card.so-vip::before { color: var(--ouro); }
.premio-custo { color: var(--ouro-texto); }
.produto-card .produto-selo-foto.produto-vip-aviso { background: var(--ouro-suave); }
.produto-card .badge-promo { background: var(--ouro); color: var(--marca); }
.catalogo-filtros input[type=search]:focus, .catalogo-filtros input[type=text]:focus { border-color: var(--ouro); }
.catalogo-filtros .chip:hover { border-color: var(--ouro); color: var(--ouro-texto); }
.catalogo-filtros > button[type=submit] { background: var(--ouro); }
.loja-clube-saldo { color: var(--ouro); }
.tc-pontos strong { color: var(--ouro); }
.tc-pontos svg { color: var(--ouro); }
.lg-btn-ver-catalogo:hover { border-color: var(--ouro); color: var(--ouro-texto); }
.tc-aba-vip { color: var(--ouro-texto) !important; }
.produto-card .produto-vip-aviso { color: var(--ouro-texto); }
.pt-so-vip { background: var(--ouro); color: var(--marca); }
.cv-h1 i { color: var(--ouro); }
.cv-kpi .n { color: var(--ouro-texto); }
.cv-nivel .l1 b { color: var(--ouro-texto); }
.cv-trilho { background: var(--ouro-suave); }
.cv-tag { background: var(--ouro); color: var(--marca); }
.cv-ic { background: var(--ouro-suave); color: var(--ouro-texto); }
.pr-trilho i { background: var(--ouro); }
.car-clube-acao { border: 1px solid var(--ouro); color: var(--ouro); }
.car-clube-det[open] .car-clube-acao { background: var(--ouro); }
.ck-premio { background: var(--ouro-suave); }
.ck-clube-barra { background: var(--ouro); }
.oc-clube-saldo { color: var(--ouro); }
.oc-clube-btn { background: var(--ouro); }
.promo-card-vip { color: var(--ouro-texto); }
.ck-clube-saldo { color: var(--ouro); }
.ck-cliente .ck-clube-premios summary { color: var(--ouro); }
.premio-foto-placeholder svg { color: var(--ouro-texto); }
.ra-kpi-escuro b { color: var(--ouro); }
.fc-premios > summary { color: var(--ouro); }
.fc-premios > summary:focus-visible { outline: 2px solid var(--ouro); }
.prc-clube b { color: var(--ouro); }
.meta-hero-ok { color: var(--ouro); }
.p360-g-meta i { background: var(--ouro); }
.p360-meses .meta { border-top: 1.5px dashed var(--ouro); color: var(--ouro-texto); }
.p360-mes .marca-meta { border-top: 1.5px dashed var(--ouro); }
.mp-meta { background: var(--ouro); color: var(--marca); }
/* aviso amarelo: atenção é laranja, não a cor de toque */
.aviso-ouro { background: var(--preench); border-color: transparent; color: #7A4D00; }
.aviso-ouro a, .aviso-ouro .btn-link { color: #7A4D00; font-weight: 600; }


/* cartões e faixas azul-marinho: lá dentro o dourado continua dourado (azul sobre azul sumia) */
.kpi-escuro,
.produto-selo-carrinho,
.cartao-escuro,
.portal-capa,
.ini-hero,
.pt-clube,
.car-clube,
.premio-card.so-vip::before,
.seta-scroll,
.cl-toast,
.me-resumo,
.me-seta,
.iv-resumo,
.iv-av.geral,
.mais-grupo .mais-sigla,
.loja-clube,
.lg-painel,
.lg-banner-mobile,
.popover-texto,
.etiqueta-meio-zapi,
.pr-badge,
.pr-chip.on,
.pr-toast,
.rv-tag.manual,
.rv-toast,
.car-reservas-aba.on,
.ck-desc-modo button[aria-pressed="true"],
.ck-entrega-opcao input:checked + span,
.es-101.es-101.es-101:not(#_),
.fc-14.fc-14.fc-14:not(#_),
.rp-37.rp-37.rp-37:not(#_),
.wa-toast,
.env-abriu,
.fat-seg-b[aria-pressed="true"],
.fat-sec-n,
.vo-topo,
.vo-sinal.off i,
.vo-chip[aria-pressed="true"],
.vo-tag,
.vo-faixa-offline,
.oc-cliente-escuro,
.cc-regua i,
.cs-sug,
.vr-aba.ativa,
.vis-tab[aria-selected="true"],
.vis-be[aria-expanded="true"],
.vis-cel-topo,
.cfg-setor.ativo,
.pub-op input:checked + .pub-op-marca,
.jur-kpi.destaque,
.ig-banner,
.ig-destaque,
.igb::after,
.igb,
.ia-hero,
.ia-av,
.ck-cliente.tem-cliente,
.ra-kpi-escuro,
.ra-p-cid span,
.ra-bola,
.ra-toast,
.ag-atalho,
.sb-dica,
.sb-dica::before,
.jx-mt i.f,
.jx-trilha li.f i,
.jx-trilha li.f::before,
.jx-trilha li.a::before,
.ct-cert,
.cf-sel-barra,
.prc-oport,
.prc-clube,
.fcm-destaque,
.cnh-hero,
.cxp-aba.ativa,
.cxp-lote,
.ck-rua .chip-parcela.ativo,
.mc-eu,
.mc-motivo[aria-pressed="true"],
.scpc-selo,
.ns-ligacao,
.vi-motivo input:checked + span,
.cmx-aba.ativo,
.cmx-barra-sel,
.ri-valor,
.rota-nova-ordem-numero,
.tooltip-flutuante,
.chat-fab::after,
.cart-fab::after,
.chat-panel-header,
.guest-header,
.cart-fab,
.compartilhar-status,
.meta-hero,
#toast,
.pull-refresh-indicador,
.sync-toast,
.p360-hero,
.p360-g-meta u,
.p360-kpi.destaque,
.navbar-mobile,
.sync-status-mobile,
.cpt-hero,
.barra-carrinho-mobile a,
.iv-hero { --gold: var(--ouro); --gold-soft: rgba(232, 179, 60, .18); --gold-ink: var(--ouro); --tinta: var(--ouro); --tinta-fundo: rgba(232, 179, 60, .18); }


/* botões que eram verdes (ação) passam para a cor de toque; o verde fica para "pago/feito" e para o WhatsApp */
.cli-btn-verde,
.at-btn-receber,
.at-btn-cobrar,
.rt-btn-cheguei,
.cf-btn-pix,
.rp-btn-transferir,
.lc-convite,
.jx .btn.btn-verde,
.jx-ficha .btn.btn-verde,
.ck-rua .ck-finalizar,
#ck-barra-fixa .btn,
.tc-btn-carrinho.tc-carrinho-cheio,
.btn.apv-aprovar,
.btn.mc-b-ir,
.btn.mc-nao-enviar,
.btn.cn-btn-assinar,
.btn.cn-btn-salvar,
.btn.mc-p-guardar,
.mc-p-acoes .btn.mc-p-pedido,
.ns-b-dist,
.btn.btn-verde,
.btn-primario,
.es-36.es-36.es-36.es-btn-verde:not(#_),
.pof-sug button[aria-pressed="true"],
.btn-verde { background: var(--tinta) !important; border-color: var(--tinta) !important; color: #fff !important; }
.produto-qtd .qtd-stepper { background: var(--tinta) !important; }

/* ---------- menos movimento / menos transparência (skill apple-design, §14) ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-icone, .btn-acao, .chip, .barra-inferior a, .mais-item, .folha-item { transition: none; }
  .btn:active, .btn-icone:active, .btn-acao:active, .chip:active, .barra-inferior a:active, .mais-item:active, .folha-item:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topo-cliente, .barra-inferior { background: #F7F7F9; -webkit-backdrop-filter: none; backdrop-filter: none; }
}