/* Mecânico Lucrativo — design do app (fundador, 13/10): escuro sóbrio + lista utilitária + faixa da marca.
   Regras em equipe/quadro/2026-10-13_app-mvp/DESIGN.md: cor pelo papel, sem gradiente/brilho, fio em vez de cartão. */
:root {
  --bg: #0C0C0E;
  --s1: #161619;
  --s2: #202024;
  --s3: #2A2A2F;
  --fio: rgba(255, 255, 255, .07);
  --tx: #F2F1EC;
  --apoio: #9C9CA4;
  --terc: #6A6A72;
  --marca: #FFC61A;
  --sobre-marca: #111111;
  --verde: #34C77B;
  --vermelho: #FF5A5F;
  --wa: #25D366;
  /* nomes antigos, para o código que ainda os usa */
  --line: var(--fio);
  --line2: rgba(255, 255, 255, .11);
  --text: var(--tx);
  --muted: var(--apoio);
  --dim: var(--terc);
  --y: var(--marca);
  --ink: var(--sobre-marca);
  --green: var(--verde);
  --blue: #6FA8E8;
  --red: var(--vermelho);
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 12px;
  --pad: 16px;
  --nav-h: 64px;
  --top: env(safe-area-inset-top, 0px);
  --bot: env(safe-area-inset-bottom, 0px);
  --curva: cubic-bezier(.32, .72, 0, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tx); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg.lucide { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }
.v, .tot b, .total b, .faixa-valor, .preco-in, .stat b { font-variant-numeric: tabular-nums; }
.y { color: var(--marca); }
.muted { color: var(--apoio); }

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: calc(var(--top) + 8px) var(--pad) calc(var(--nav-h) + var(--bot) + 24px); }
.app.sem-nav { padding-bottom: calc(var(--bot) + 120px); }
.app.limpa { padding-bottom: calc(var(--bot) + 32px); }

/* ---------- topo ---------- */
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--sobre-marca); background: var(--marca); }
.logo-ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--tx); background: var(--s2); }
.icon-btn { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.icon-btn:active { background: var(--s2); }
.titulo-tela { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 16px; }
.sobre { font-size: 14px; font-weight: 600; color: var(--apoio); margin: 6px 0 0; }
.saud { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 16px; line-height: 1.15; }
.oficina { display: flex; align-items: center; gap: 6px; color: var(--apoio); font-size: 14px; margin-top: 8px; }
.oficina svg { width: 16px; height: 16px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 10px; gap: 12px; }
.sec h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sec .apoio { color: var(--apoio); font-size: 14px; margin-top: 2px; }
.sec a, .sec > button { color: var(--apoio); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------- faixa da marca (início) ---------- */
.faixa { background: var(--marca); color: var(--sobre-marca); margin: calc(-1 * (var(--top) + 8px)) calc(-1 * var(--pad)) 0;
  padding: calc(var(--top) + 14px) var(--pad) 22px; }
.faixa { position: relative; }
.faixa-perfil { position: absolute; top: calc(var(--top) + 12px); right: var(--pad); width: 32px; height: 32px; font-size: 12px; }
.faixa .avatar { background: var(--sobre-marca); color: var(--marca); }
.faixa-rot { font-size: 14px; font-weight: 600; opacity: .72; margin-top: 18px; }
.faixa-valor { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 2px 0 4px; }
.faixa-valor small { font-size: 22px; font-weight: 700; }
/* Início (fundador, 13/10: mistura do B com o C): microfone no centro com os passos, e o dinheiro do mês embaixo */
.mic-c { display: grid; justify-items: center; text-align: center; margin: 34px 0 0; }
/* microfone do Início: o botão preto de antes (anéis 8%/4%), com a animação (respira e solta ondas) (fundador, 13/10) */
.mic-b { position: relative; isolation: isolate; width: 92px; height: 92px; border-radius: 50%; margin-top: 16px; display: grid; place-items: center;
  background: var(--sobre-marca); color: var(--marca); box-shadow: 0 0 0 8px rgba(0, 0, 0, .08), 0 0 0 16px rgba(0, 0, 0, .04);
  animation: respira 2.4s ease-in-out infinite; }
.mic-b svg { width: 36px; height: 36px; stroke-width: 2; }
.mic-b::before, .mic-b::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--sobre-marca);
  animation: ondaMic 2.4s ease-out infinite; pointer-events: none; }
.mic-b::after { animation-delay: 1.2s; }
.mic-b:active { transform: scale(.95); animation: none; }
@keyframes respira { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes ondaMic { 0% { transform: scale(1); opacity: .22; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mic-b, .mic-b::before, .mic-b::after { animation: none; } }
.mic-c h2 { margin: 24px 0 0; font-size: 20px; font-weight: 700; }
.passos { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.passos span { display: inline-flex; align-items: center; gap: 5px; }
.passos svg { width: 15px; height: 15px; stroke-width: 2.2; }
.passos svg.s { opacity: .4; width: 12px; height: 12px; }
.dinheiro { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .12); }
.dinheiro .faixa-rot { margin-top: 0; }
.dinheiro .faixa-valor { font-size: 32px; }
.dinheiro .faixa-valor small { font-size: 18px; }
.barra-t { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13px; }
.barra-t span { opacity: .72; font-weight: 500; }
.barra-t b { font-weight: 700; }
.barra-d { display: flex; gap: 2px; height: 10px; margin-top: 6px; }
.barra-d i { display: block; height: 100%; min-width: 4px; }
.barra-d i:first-child { border-radius: 3px 0 0 3px; } .barra-d i:last-child { border-radius: 0 3px 3px 0; } .barra-d i:only-child { border-radius: 3px; }
.barra-d .a, .leg i.a { background: var(--sobre-marca); }
.barra-d .b, .leg i.b { background: rgba(0, 0, 0, .45); }
.barra-d .c, .leg i.c { background: rgba(0, 0, 0, .16); }
.barra-d .vazia { flex: 1; background: rgba(0, 0, 0, .1); }
.leg { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; }
.leg div { display: flex; align-items: center; gap: 8px; }
.leg i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.leg span { opacity: .75; font-weight: 500; }
.leg b { margin-left: auto; font-variant-numeric: tabular-nums; }
/* hierarquia (fundador, 13/10): aprovado pesa mais que falado, que pesa mais que esperando */
.leg .n-a { font-size: 16px; } .leg .n-a span { opacity: 1; font-weight: 700; } .leg .n-a b { font-weight: 800; } .leg .n-a i { width: 12px; height: 12px; }
.leg .n-b { font-size: 14px; } .leg .n-b span { opacity: .78; } .leg .n-b b { font-weight: 600; }
.leg .n-c { font-size: 13px; } .leg .n-c span { opacity: .6; } .leg .n-c b { font-weight: 500; opacity: .7; } .leg .n-c i { width: 8px; height: 8px; margin: 0 1px; }
.faixa .carregando { color: var(--sobre-marca); opacity: .7; justify-content: flex-start; padding: 22px 0 16px; }
.faixa .giro { border-color: rgba(0, 0, 0, .15); border-top-color: var(--sobre-marca); }

/* painel do mês antigo (não usado no início novo) */
.mes { border-radius: var(--r); padding: 16px; background: var(--s1); }
.mes-top { display: flex; justify-content: space-between; align-items: center; }
.mes-rot { font-size: 14px; font-weight: 600; color: var(--apoio); }
.var { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--verde); }
.var.baixa { color: var(--vermelho); }
.var svg { width: 14px; height: 14px; }
.mes-valor { font-size: 34px; font-weight: 700; letter-spacing: -.03em; margin: 6px 0 12px; }
.barras, .dias { display: none; }
.mes-nums { display: flex; gap: 16px; border-top: 1px solid var(--fio); padding-top: 12px; }
.mes-nums b { font-size: 16px; font-weight: 700; }
.mes-nums span { font-size: 13px; color: var(--apoio); margin-left: 4px; }

/* chamada para o novo orçamento (fora da faixa) */
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; height: 52px; border-radius: 10px; width: 100%;
  background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.cta-ic { display: contents; }
.cta-ic svg { width: 20px; height: 20px; }
.cta b { font-size: 16px; font-weight: 700; }
.cta span span, .cta > svg { display: none; }

/* ---------- pacotes ---------- */
/* pacote em linha no início: ícone de contorno num círculo cinza, seta no fim */
.pl-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; flex: none; color: var(--tx); }
.pl-ic svg { width: 20px; height: 20px; }
.linha .seta { color: var(--terc); width: 18px; height: 18px; }
.pacotes-h { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scrollbar-width: none; }
.pacotes-h::-webkit-scrollbar { display: none; }
.pacotes-h .pac { flex: 0 0 156px; }
.pacotes-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pac { position: relative; text-align: left; border-radius: var(--r); padding: 14px; background: var(--s1); border: 1px solid transparent; display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; }
.pac.on { border-color: var(--marca); }
.pac-ic { display: none; }
.pac b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.pac span { font-size: 13px; color: var(--apoio); margin-top: 8px; }
.pac .meu { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 600; color: var(--apoio); margin: 0; }
.c-y, .c-o, .c-g, .c-b { color: var(--apoio); }

/* ---------- listas: sem moldura, só o fio entre as linhas (fundador, 13/10) ---------- */
.lista { display: grid; grid-template-columns: minmax(0, 1fr); }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; background: transparent; }
.lista > .linha { padding-left: 0; padding-right: 0; }
.lista > .linha + .linha { border-top: 1px solid var(--fio); }
button.linha:active { opacity: .6; }
.thumb { width: 56px; height: 40px; display: grid; place-items: center; flex: none; }
.thumb svg { width: 100%; height: 100%; }
.foto-veic { width: 100%; height: 100%; object-fit: contain; display: block; }
/* veículo ainda não escolhido: o carro em cima e a moto embaixo, para mostrar que dá para escolher os dois (fundador, 13/10) */
.thumb.dois { height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.thumb.dois > * { width: 46px; height: 22px; }
.linha .meio { flex: 1; min-width: 0; }
.linha .t { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .s { font-size: 14px; color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .d { font-size: 13px; color: var(--terc); }
.linha .fim { text-align: right; display: grid; justify-items: end; gap: 2px; }
.linha .v { font-weight: 600; font-size: 16px; white-space: nowrap; }
/* status em palavra (sem selo nem bolinha) */
.pill { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--apoio); }
.pill.aprovado, .pill.feito { color: var(--verde); }
.vazio { text-align: center; color: var(--apoio); padding: 28px 16px; font-size: 15px; background: var(--s1); border-radius: var(--r); }
.vazio svg { width: 24px; height: 24px; margin: 0 auto 8px; display: block; color: var(--terc); }
.ini { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: var(--s2); color: var(--tx); flex: none; }

/* filtros e busca */
.busca { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--s1); margin-bottom: 12px; }
.busca svg { color: var(--terc); }
.busca input { flex: 1; background: none; border: 0; outline: none; font-size: 16px; min-width: 0; }
.busca input::placeholder { color: var(--terc); }
.chips { display: flex; gap: 4px; overflow-x: auto; margin: 0 calc(-1 * var(--pad)) 12px; padding: 0 var(--pad); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.cheio .chip { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
.chip { flex: none; height: 36px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--apoio); display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--s2); color: var(--tx); }
.chip.on-y { color: var(--marca); }
.chip small { font-weight: 500; color: var(--terc); }
.stats { display: flex; margin-bottom: 14px; }
.stat { flex: 1; padding: 2px 12px; border-left: 1px solid var(--fio); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { display: block; font-size: 18px; font-weight: 700; }
.stat span { font-size: 13px; color: var(--apoio); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--s1); gap: 2px; }
.seg button { height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--apoio); display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--s3); color: var(--tx); }
.seg button svg { width: 16px; height: 16px; }

/* ---------- navegação de baixo: 4 abas com rótulo, a ativa numa pílula (padrão Android) ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--s1); border-top: 1px solid var(--fio); padding-bottom: var(--bot); }
.nav-in { max-width: 560px; margin: 0 auto; height: var(--nav-h); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.nav a { display: grid; justify-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--apoio); }
.nav .ico { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.nav .ico svg { width: 22px; height: 22px; }
.nav a.on { color: var(--tx); font-weight: 600; }
.nav a.on .ico { background: var(--s3); color: var(--marca); }

/* ---------- passos do novo orçamento ---------- */
.passo-cab { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 56px; }
.passo-cab .tt { text-align: center; min-width: 0; }
.passo-cab .tt b { display: block; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passo-cab .tt span { font-size: 13px; color: var(--apoio); }
.prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0 18px; }
.prog i { height: 3px; border-radius: 2px; background: var(--s3); }
.prog i.on { background: var(--marca); }
.rot { font-size: 15px; font-weight: 600; color: var(--apoio); margin: 22px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.rot button { color: var(--tx); font-size: 14px; font-weight: 600; }
.campo { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 10px; background: var(--s1); border: 1px solid transparent; margin-bottom: 8px; }
.campo:focus-within { border-color: var(--marca); }
.campo .ci { display: grid; place-items: center; color: var(--terc); flex: none; }
.campo .ci svg { width: 20px; height: 20px; }
.campo label { flex: 1; min-width: 0; display: grid; }
.campo label span { font-size: 13px; color: var(--apoio); font-weight: 500; }
.campo input, .campo textarea { background: none; border: 0; outline: none; font-size: 17px; padding: 2px 0; width: 100%; }
.campo textarea { resize: vertical; min-height: 60px; font-size: 16px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--terc); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { border-radius: 10px; background: var(--s1); border: 1px solid transparent; padding: 8px 12px; display: grid; min-width: 0; }
.mini:focus-within { border-color: var(--marca); }
.mini span { font-size: 13px; color: var(--apoio); font-weight: 500; }
.mini input { background: none; border: 0; outline: none; font-size: 16px; font-weight: 600; width: 100%; padding: 2px 0; min-width: 0; }
.modelos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mod { border-radius: var(--r); background: var(--s1); border: 1px solid transparent; overflow: hidden; text-align: center; }
.mod.on { border-color: var(--marca); }
.mod .img { height: 64px; display: grid; place-items: center; padding: 8px 8px 0; }
.mod .img svg { width: 100%; height: 100%; }
.mod .img svg.lucide { width: 24px; height: 24px; color: var(--terc); }
.mod b { display: block; font-size: 13px; font-weight: 600; padding: 6px 4px 10px; line-height: 1.2; }
.escolhido { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--s1); margin-bottom: 12px; }
.escolhido .thumb { width: 88px; height: 60px; }
.escolhido .meio { flex: 1; min-width: 0; }
.escolhido b { display: block; font-size: 17px; font-weight: 600; }
.escolhido span { font-size: 14px; color: var(--apoio); }
.meus-veic { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--pad)) 6px; padding: 0 var(--pad); scrollbar-width: none; }
.meus-veic .linha { flex: 0 0 auto; width: auto; padding: 8px 14px 8px 8px; background: var(--s1); border-radius: var(--r); border: 1px solid transparent; }
.meus-veic .linha.on { border-color: var(--marca); }
.meus-veic .thumb { width: 52px; height: 36px; }

/* falar */
.falar { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 18px 0 6px; }
.mic { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; color: var(--sobre-marca); background: var(--marca); }
.mic svg { width: 48px; height: 48px; stroke-width: 2; }
.mic.on { background: var(--vermelho); color: #fff; animation: pulso 1.4s infinite; }
.mic:disabled { opacity: .5; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .4); } 100% { box-shadow: 0 0 0 24px rgba(255, 90, 95, 0); } }
.tempo { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dica { color: var(--apoio); font-size: 15px; max-width: 320px; min-height: 22px; }
.exemplo { padding: 14px 0 0; border-top: 1px solid var(--fio); color: var(--apoio); font-size: 15px; margin-top: 22px; }
.exemplo b { color: var(--tx); display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.exemplo b svg { display: none; }
.texto-box textarea { width: 100%; min-height: 120px; resize: vertical; background: var(--s1); border: 1px solid transparent; border-radius: var(--r); padding: 14px; outline: none; font-size: 16px; }
.texto-box textarea:focus { border-color: var(--marca); }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--s3); border-top-color: var(--tx); animation: giro .8s linear infinite; display: inline-block; vertical-align: middle; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--apoio); padding: 28px 0; font-size: 15px; }

/* itens */
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--s1); width: 100%; text-align: left; }
.item .tipo { display: grid; place-items: center; flex: none; color: var(--terc); }
.item .tipo svg { width: 20px; height: 20px; }
.item .meio { flex: 1; min-width: 0; }
.item .t { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { font-size: 14px; color: var(--apoio); }
.item .v { font-weight: 600; white-space: nowrap; }
.item.falta .v { color: var(--vermelho); font-size: 14px; font-weight: 600; }
.item .add { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--s2); color: var(--tx); flex: none; }
.item .add.on { background: var(--marca); color: var(--sobre-marca); }
.item .add svg { width: 18px; height: 18px; }
.no-orc, #cat-lista, .lista-itens { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r); overflow: hidden; }
.no-orc > .item + .item, #cat-lista > .item + .item, .lista-itens > .item + .item { border-top: 1px solid var(--fio); }

/* barra fixa de baixo (total / ação) */
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--s1); border-top: 1px solid var(--fio); padding-bottom: var(--bot); }
.barra-in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); }
.barra-in .tot { flex: 1; min-width: 0; }
.barra-in .tot span { font-size: 13px; color: var(--apoio); }
.barra-in .tot b { display: block; font-size: 22px; font-weight: 700; }
.barra-in.so-botao .btn { flex: 1; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.btn:disabled { opacity: .45; }
.btn.travado { opacity: .45; } /* falta preço: o toque só avisa */
.btn svg { width: 20px; height: 20px; stroke-width: 2; }
.btn-y { background: var(--marca); color: var(--sobre-marca); }
.btn-preto { background: var(--sobre-marca); color: #fff; }
.btn-wa { background: var(--wa); color: #06210F; }
.btn-s { background: var(--s2); color: var(--tx); }
.btn-g { background: transparent; color: var(--apoio); }
.btn-b { width: 100%; }
.btn-p { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.link { color: var(--tx); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--terc); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* resumo do orçamento */
.hero { position: relative; overflow: hidden; border-radius: var(--r); padding: 16px; min-height: 160px; background: var(--s1); }
.hero .des { position: absolute; right: 8px; bottom: 10px; width: 54%; }
.hero .des svg, .hero .des .foto-veic { width: 100%; height: auto; display: block; }
.hero .tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--s2); color: var(--apoio); }
.tag svg { width: 14px; height: 14px; }
.hero h3 { position: relative; margin: 28px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; max-width: 46%; line-height: 1.15; }
.hero p { position: relative; margin: 0; color: var(--apoio); font-size: 14px; max-width: 46%; }
.bloco { border-radius: var(--r); background: var(--s1); margin-top: 12px; overflow: hidden; }
.bloco-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 6px; }
.bloco-cab b { font-size: 15px; font-weight: 600; }
.bloco-cab span { font-size: 13px; color: var(--apoio); }
.bl { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--fio); }
.bl .t { font-weight: 500; }
.bl .s { font-size: 13px; color: var(--apoio); }
.bl .v { font-weight: 600; white-space: nowrap; }
.bl-sub { display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--fio); color: var(--apoio); font-weight: 500; font-size: 14px; }
.bl-sub b { color: var(--tx); font-weight: 600; }
.divisao { margin-top: 12px; padding: 0 2px; }
.barra-div { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--s3); margin-bottom: 8px; }
.barra-div i { display: block; }
.divisao .leg { display: flex; justify-content: space-between; font-size: 13px; color: var(--apoio); }
.divisao .leg b { color: var(--tx); }
.total { margin-top: 12px; border-radius: var(--r); padding: 16px; display: flex; justify-content: space-between; align-items: center; background: var(--s1); }
.total span { font-size: 15px; font-weight: 600; display: block; }
.total small { font-size: 13px; color: var(--apoio); }
.total b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.nota { display: flex; gap: 10px; margin-top: 12px; padding: 0 2px; color: var(--apoio); font-size: 14px; }
.nota svg { color: var(--terc); flex: none; margin-top: 1px; width: 18px; height: 18px; }

/* catálogo / preços */
.preco-l { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--s1); }
.preco-l + .preco-l { border-top: 1px solid var(--fio); }
.preco-l:first-child { border-radius: var(--r) var(--r) 0 0; }
.preco-l:last-child { border-radius: 0 0 var(--r) var(--r); }
.preco-l:only-child { border-radius: var(--r); }
.preco-l.oculto { opacity: .45; }
.preco-l .meio { flex: 1; min-width: 0; }
.preco-l .t { font-weight: 600; font-size: 15px; }
.preco-l .s { font-size: 13px; color: var(--terc); }
.preco-in { width: 96px; height: 40px; border-radius: 8px; background: var(--s2); border: 1px solid transparent; text-align: right; padding: 0 10px; font-weight: 600; outline: none; font-size: 15px; }
.preco-in:focus { border-color: var(--marca); }
.preco-in::placeholder { color: var(--terc); font-weight: 500; }
.mini-btn { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--terc); flex: none; }
.mini-btn svg { width: 18px; height: 18px; }
.info { display: flex; gap: 8px; color: var(--apoio); font-size: 14px; margin-bottom: 12px; }
.info svg { color: var(--terc); flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* perfil */
.perfil-top { display: grid; justify-items: center; text-align: center; margin: 8px 0 20px; }
.perfil-top .avatar { width: 72px; height: 72px; font-size: 26px; margin-bottom: 12px; }
.perfil-top b { font-size: 22px; font-weight: 700; }
.perfil-top span:not(.avatar) { color: var(--apoio); font-size: 14px; }
.menu { border-radius: var(--r); background: var(--s1); overflow: hidden; margin-top: 14px; }
.menu > button, .menu > a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-top: 1px solid var(--fio); text-align: left; }
.menu > :first-child { border-top: 0; }
.menu .mi { display: grid; place-items: center; color: var(--apoio); flex: none; }
.menu .mi svg { width: 20px; height: 20px; }
.menu .tx { flex: 1; font-weight: 500; }
.menu .vl { color: var(--apoio); font-size: 14px; }
.menu .seta { color: var(--terc); width: 18px; height: 18px; }
.versao { text-align: center; color: var(--terc); font-size: 12px; margin-top: 18px; }

/* linha do tempo */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--s3); }
.tl-i { position: relative; display: block; width: 100%; text-align: left; padding: 0 0 16px; }
.tl-i::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--terc); border: 2px solid var(--bg); }
.tl-i.aprovado::before, .tl-i.feito::before { background: var(--verde); }
.tl-i b { font-weight: 600; }
.tl-i span { display: block; color: var(--apoio); font-size: 13px; }

/* folha de baixo (sheet) */
.veu { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; animation: veu .18s ease; }
@keyframes veu { from { opacity: 0; } }
.folha { width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto; background: var(--s1); border-radius: 14px 14px 0 0;
  padding: 8px var(--pad) calc(var(--bot) + 20px); animation: sobe .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes sobe { from { transform: translateY(40px); } }
.folha::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--s3); margin: 0 auto 14px; }
.folha h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.folha .apoio { color: var(--apoio); font-size: 14px; margin: 0 0 14px; }
.folha .campo, .folha .mini, .folha .busca { background: var(--s2); }
.folha .acoes { display: grid; gap: 8px; margin-top: 16px; }
.folha .lista-sel { display: grid; gap: 6px; max-height: 40dvh; overflow: auto; }
.qtd { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; background: var(--s2); padding: 4px; }
.qtd button { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--s3); }
.qtd input { width: 52px; text-align: center; background: none; border: 0; outline: none; font-size: 18px; font-weight: 700; }
.linha-qtd { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; }
.check { display: flex; align-items: center; gap: 10px; color: var(--apoio); font-size: 14px; margin-top: 12px; }
.check input { width: 20px; height: 20px; accent-color: var(--marca); }
.erro { color: var(--vermelho); font-size: 14px; margin: 8px 0; }
.erro:empty { margin: 0; }

/* entrar */
.entrar { min-height: calc(100dvh - 60px); display: flex; flex-direction: column; justify-content: center; }
/* entrar (fundador, 13/10): em cima, o mecanismo do app em loop (o cliente chega, o mecânico fala, o orçamento se monta,
   vai no WhatsApp, o cliente aprova, o serviço começa); embaixo, a marca e o formulário, perto do polegar */
.login { min-height: calc(100dvh - var(--top) - 8px); display: flex; flex-direction: column; justify-content: center;
  margin-bottom: calc(-1 * (var(--bot) + 120px)); padding-bottom: calc(var(--bot) + 20px); }
/* o conjunto fica no meio da tela; a animação cresce até onde a largura e a altura deixam (fundador: "muito espaço em branco") */
.login-palco { flex: none; display: flex; align-items: flex-start; justify-content: center; height: 250px; }
.palco { position: relative; width: 100%; height: 250px; flex: none; transform-origin: 50% 0; }
.palco [class^="tel-"], .palco [class^="palco-"] { will-change: transform, opacity; }
.tel { position: absolute; top: 0; width: 104px; height: 178px; border-radius: 16px; background: var(--s1); border: 1.5px solid var(--s3); overflow: hidden; }
.tel::before { content: ""; position: absolute; top: 5px; left: 50%; width: 22px; height: 4px; margin-left: -11px; border-radius: 2px; background: rgba(0, 0, 0, .35); z-index: 4; }
.tel-m { left: 0; }
.tel-c { right: 0; background: #0B141A; }
.tel-app { height: 62px; background: var(--marca); display: grid; place-items: center; padding-top: 8px; }
.tel-mic { position: relative; isolation: isolate; width: 30px; height: 30px; border-radius: 50%; background: var(--sobre-marca); color: var(--marca); display: grid; place-items: center; }
.tel-mic svg { width: 14px; height: 14px; stroke-width: 2.2; }
.tel-anel { position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--sobre-marca); }
.tel-onda { position: absolute; left: 0; right: 0; top: 82px; height: 34px; display: flex; justify-content: center; align-items: center; gap: 3px; }
.tel-onda i { width: 3px; height: 3px; border-radius: 2px; background: var(--marca); }
.tel-itens { position: absolute; left: 11px; right: 11px; top: 76px; }
.tel-l { display: flex; justify-content: space-between; align-items: center; height: 16px; border-bottom: 1px solid var(--fio); }
.tel-l i { width: 44px; height: 4px; border-radius: 2px; background: #3A3A42; }
.tel-l:nth-child(2) i { width: 34px; }
.tel-l:nth-child(3) i { width: 50px; }
.tel-l b { width: 14px; height: 4px; border-radius: 2px; background: #6A6A72; }
.tel-tot { height: 15px; margin-top: 9px; border-radius: 4px; background: var(--marca); transform-origin: left; }
.tel-wa { height: 24px; background: #202C33; position: relative; }
.tel-wa i { position: absolute; left: 8px; bottom: 5px; width: 10px; height: 10px; border-radius: 50%; background: #54656F; }
.tel-notif { position: absolute; left: 5px; right: 5px; top: 0; height: 24px; border-radius: 8px; background: #2A3942; display: flex;
  align-items: center; gap: 5px; padding: 0 6px; z-index: 3; }
.tel-notif .wa-logo { width: 12px; height: 12px; color: var(--wa); flex: none; }
.tel-notif span { display: grid; gap: 3px; flex: 1; }
.tel-notif span i { height: 3px; border-radius: 2px; background: #8696A0; }
.tel-notif span i:last-child { width: 60%; background: #54656F; }
.tel-msg { position: absolute; left: 7px; top: 40px; width: 76px; padding: 4px; border-radius: 6px; background: #202C33; }
.tel-doc { height: 34px; border-radius: 3px; background: #FFF; border-top: 3px solid var(--marca); padding: 5px 5px 0; display: grid; gap: 4px; align-content: start; }
.tel-doc i { height: 3px; border-radius: 2px; background: #C9C9CF; }
.tel-doc i:last-child { width: 60%; }
.tel-aprovar { position: relative; margin-top: 4px; height: 17px; border-radius: 3px; background: var(--wa); display: grid; place-items: center; }
.tel-txt { width: 30px; height: 3px; border-radius: 2px; background: #06210F; }
.tel-ok { position: absolute; inset: 0; display: grid; place-items: center; color: #06210F; }
.tel-ok svg { width: 11px; height: 11px; stroke-width: 3.2; }
.tel-toque { position: absolute; left: 50%; bottom: -3px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #FFF; }
.tel-resp { position: absolute; right: 7px; top: 134px; width: 30px; height: 16px; border-radius: 6px; background: #005C4B; display: grid; place-items: center; color: #53BDEB; }
.tel-resp svg { width: 12px; height: 12px; stroke-width: 2.6; }
.palco-rot { position: absolute; top: 186px; width: 104px; text-align: center; font-size: 12px; color: var(--terc); }
.palco-rot-m { left: 0; }
.palco-rot-c { right: 0; }
/* o cliente (sem carro nem moto: o app é dos dois mecânicos) e o serviço, no meio, entre os celulares */
.palco-cli, .palco-serv { position: absolute; left: 50%; top: 56px; width: 68px; height: 68px; margin-left: -34px; }
.palco-av, .palco-eng { position: absolute; inset: 0; border-radius: 50%; background: var(--s2); display: grid; place-items: center; color: var(--apoio); }
.palco-av svg { width: 30px; height: 30px; stroke-width: 1.8; }
.palco-eng { color: var(--marca); }
.palco-eng svg { width: 32px; height: 32px; stroke-width: 1.8; }
.palco-fala { position: absolute; left: 46px; top: -14px; width: 34px; height: 20px; border-radius: 10px 10px 10px 3px; background: var(--s3);
  display: flex; justify-content: center; align-items: center; gap: 3px; transform-origin: 0 100%; }
.palco-fala i { width: 4px; height: 4px; border-radius: 50%; background: var(--apoio); }
.palco-chave { position: absolute; right: -8px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--marca);
  color: var(--sobre-marca); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.palco-chave svg { width: 16px; height: 16px; stroke-width: 2.4; }
.palco-voo { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; z-index: 5; }
.palco-voo .wa-logo { width: 16px; height: 16px; color: #FFF; }
.palco-legenda { position: absolute; left: 0; right: 0; top: 218px; height: 26px; }
.palco-legenda span { position: absolute; left: 0; right: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -.01em; opacity: 0; }
/* respiro (fundador, 13/10: "tô achando tudo muito aglomerado"): título, campos, botão e pé com folga entre si */
.login-marca { display: grid; gap: 6px; padding-top: 28px; }
.login-marca span { color: var(--apoio); font-size: 14px; font-weight: 600; }
.login-marca h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.login-form { padding-top: 28px; }
/* hierarquia (fundador, 13/10: "ajuste a hierarquia dos textos"): o rótulo é o texto forte; o exemplo dentro do campo, bem
   apagado; a dica do rótulo, menor; o pé, discreto */
.login-form .campo { padding: 12px 16px; margin-bottom: 12px; }
.login-form .campo label span { color: var(--tx); font-size: 14px; font-weight: 600; }
.login-form .campo label span i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--terc); }
.login-form .campo input { font-size: 17px; padding-top: 4px; }
.login-form .campo input::placeholder { color: #4A4A52; }
.login-form .btn { margin-top: 12px; }
.login-ajuda { font-size: 13px; color: var(--terc); text-align: center; margin: 24px 0 0; }
.login-ajuda b { color: var(--apoio); font-weight: 600; }
.entrar .logo { margin-bottom: 32px; }
.entrar h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; }
.entrar > p { color: var(--apoio); margin: 0 0 24px; }

/* aviso */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--bot) + 16px); transform: translateX(-50%) translateY(12px); z-index: 60;
  background: var(--s3); color: var(--tx); padding: 12px 16px; border-radius: 10px; font-weight: 500; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 768px) {
  .modelos { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- orçamentos: período, 3 métricas e botão do microfone (fundador, 13/10) ---------- */
.chips svg { width: 16px; height: 16px; }
.res { background: var(--s1); border-radius: var(--r); margin-bottom: 24px; padding: 12px 12px 0; overflow: hidden; }
.res > .carregando { padding: 24px; }
/* as 3 métricas: botões de escolha (seg) separados do número (fundador, 13/10) */
.met { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; background: var(--bg); }
.met button { justify-content: center; padding: 0 6px; min-width: 0; white-space: nowrap; }
.met button.on { background: var(--s3); color: var(--tx); }
.met-corpo { padding: 18px 2px 14px; }
.heroi { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.leia { font-size: 14px; color: var(--apoio); margin: 4px 0 14px; min-height: 20px; }
.grafico svg { display: block; touch-action: pan-y; }
.grafico .col { fill: var(--verde); transition: opacity .15s; }
.grafico .col.zero { fill: var(--s3); }
.grafico .col.apagada { opacity: .3; }
.grafico .grade { stroke: var(--fio); stroke-width: 1; }
.grafico .base { stroke: var(--s3); stroke-width: 1; }
.grafico text { font-size: 11px; fill: var(--terc); font-variant-numeric: tabular-nums; }
/* funil da aprovação: barra cinza, a etapa "Aprovados" em verde */
.funil { display: grid; gap: 12px; }
.fl { display: grid; grid-template-columns: 74px minmax(0, 1fr) 24px 66px; align-items: center; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.fl-t { color: var(--apoio); }
.fl-trilho { height: 12px; border-radius: 0 4px 4px 0; background: var(--s2); overflow: hidden; }
.fl-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--terc); }
.fl-barra.ok { background: var(--verde); }
.fl-n { text-align: right; font-weight: 600; }
.fl-v { text-align: right; color: var(--apoio); }
.espera { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--fio); font-size: 14px; color: var(--apoio); }
.espera svg { width: 18px; height: 18px; color: var(--terc); }
.espera b { color: var(--tx); font-weight: 600; }
/* tabela do ticket médio */
.tab { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tab th { text-align: right; font-size: 12px; font-weight: 600; color: var(--terc); padding: 0 0 8px 10px; }
.tab td { text-align: right; padding: 10px 0 10px 10px; border-top: 1px solid var(--fio); white-space: nowrap; color: var(--apoio); }
.tab th:first-child, .tab td:first-child { text-align: left; padding-left: 0; }
.tab td:first-child { white-space: normal; color: var(--tx); }
.tab td:last-child { color: var(--tx); font-weight: 600; }
/* novo orçamento: botão redondo amarelo com microfone, tremendo de tempos em tempos (fundador, 13/10) */
.app:has(.fab-mic) { padding-bottom: calc(var(--nav-h) + var(--bot) + 104px); }
.fab-mic { position: fixed; z-index: 21; right: max(16px, calc((100vw - 560px) / 2 + 16px)); bottom: calc(var(--nav-h) + var(--bot) + 16px);
  width: 64px; height: 64px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5); animation: tremer 3.2s ease-in-out infinite; }
.fab-mic svg { width: 28px; height: 28px; stroke-width: 2.2; }
.fab-mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--marca); opacity: 0; animation: onda 3.2s ease-out infinite; pointer-events: none; }
.fab-mic:active { transform: scale(.94); animation: none; }
@keyframes tremer { 0%, 16%, 100% { transform: rotate(0); } 2% { transform: rotate(-12deg); } 4% { transform: rotate(12deg); } 6% { transform: rotate(-10deg); }
  8% { transform: rotate(10deg); } 10% { transform: rotate(-6deg); } 12% { transform: rotate(6deg); } 14% { transform: rotate(-2deg); } }
@keyframes onda { 0% { transform: scale(1); opacity: .6; } 35% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fab-mic, .fab-mic::after { animation: none; } }
.wa-logo { width: 20px; height: 20px; flex: none; }
.passos .wa-logo { width: 14px; height: 14px; }

/* ---------- gravador: modal que já abre gravando, com tempo, onda e o botão de parar (fundador, 13/10) ---------- */
.gravador { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .72); display: flex; align-items: flex-end; justify-content: center; }
.grav-in { position: relative; width: 100%; max-width: 560px; background: var(--s1); border-radius: 20px 20px 0 0; padding: 22px 20px calc(var(--bot) + 30px);
  display: grid; justify-items: center; text-align: center; }
.grav-x { position: absolute; top: 10px; left: 10px; color: var(--apoio); }
.grav-st { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--apoio); }
.grav-st .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--terc); }
.gravador.on .grav-st { color: var(--tx); }
.gravador.on .grav-st .ponto { background: var(--vermelho); animation: pisca 1s ease-in-out infinite; }
.gravador.pensando .grav-st .ponto, .gravador.falhou .grav-st .ponto { display: none; }
.grav-tempo { font-size: 52px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 6px 0 16px; }
.onda { display: block; width: 100%; max-width: 380px; height: 96px; }
/* o botão de parar dentro do anel do limite de 1 minuto, que fecha em amarelo com o tempo (fundador, 13/10) */
.grav-stop-w { position: relative; width: 100px; height: 100px; margin-top: 16px; display: grid; place-items: center; }
.grav-stop-w[hidden] { display: none; }
/* o anel fica por cima do botão: o toque tem de atravessar (fundador, 13/10: "o botão de stop não está parando a gravação") */
.grav-anel { position: absolute; inset: 0; transform: rotate(-90deg); fill: none; stroke-width: 8; opacity: 0; transition: opacity .2s; pointer-events: none; }
.grav-anel circle { stroke: rgba(255, 198, 26, .16); }
.grav-anel .cheio { stroke: var(--marca); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear; }
.gravador.on .grav-anel { opacity: 1; }
.grav-dica.acaba { color: var(--vermelho); font-weight: 600; }
.grav-stop { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; background: var(--vermelho); color: #fff; display: grid; place-items: center; }
.grav-stop svg { width: 28px; height: 28px; fill: currentColor; transition: transform .2s; }
.grav-stop:active { transform: scale(.94); }
.grav-stop:disabled { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.grav-stop:disabled svg { fill: none; }
.gravador.limite .grav-tempo, .gravador.limite .onda { display: none; }
.grav-dica { margin-top: 16px; font-size: 14px; color: var(--apoio); max-width: 330px; min-height: 40px; }
/* processando: as barras do áudio no alto, o passo em título e, embaixo, a duração e depois a fala entendida */
.gravador.pensando .grav-in { align-content: center; }
.gravador.pensando .grav-tempo, .gravador.pensando .grav-stop-w { display: none; }
.gravador.pensando .onda { order: 1; }
.gravador.pensando .grav-st { order: 2; margin-top: 20px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--tx); }
.gravador.pensando .grav-dica { order: 3; margin-top: 6px; font-size: 15px; min-height: 63px; }
.gravador.pensando .grav-dica.fala { color: var(--tx); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.troca { animation: troca .32s var(--curva); }
@keyframes troca { from { opacity: 0; transform: translateY(6px); } }
.grav-acoes { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes sobe { from { transform: translateY(24px); opacity: .6; } }
/* ---------- catálogo (fundador, 13/10): seletor de 4, busca com "+", linhas com preço, folhas de edição ---------- */
.mini-seg button { height: 30px; padding: 0 10px; font-size: 13px; }
.seg4, .seg2 { display: grid; width: 100%; }
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 12px; }
.seg2 { grid-template-columns: 1fr 1fr; margin: 4px 0 2px; }
.seg4 button, .seg2 button { justify-content: center; padding: 0 4px; font-size: 13.5px; white-space: nowrap; }
.folha .seg4, .folha .seg2 { background: var(--s2); margin: 4px 0 2px; }
.folha .seg4 button.on, .folha .seg2 button.on { background: var(--s3); }
.busca-l { display: flex; gap: 8px; margin-bottom: 12px; }
.busca-l .busca { flex: 1; margin: 0; }
.mais { width: 44px; height: 44px; border-radius: 10px; background: var(--marca); color: var(--sobre-marca); display: grid; place-items: center; flex: none; }
.mais svg { width: 22px; height: 22px; stroke-width: 2.4; }
.sem-preco { color: var(--vermelho); font-size: 14px; font-weight: 500; white-space: nowrap; }
.linha > .v { font-weight: 600; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-grupo { font-size: 13px; font-weight: 600; color: var(--terc); margin: 18px 0 2px; }
.cat-grupo:first-child { margin-top: 4px; }
.sec-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sec-acoes.um { grid-template-columns: 1fr; }
.sec-acoes button { height: 46px; border-radius: 10px; background: var(--s2); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; }
.sec-acoes svg { width: 18px; height: 18px; }
.perigo { color: var(--vermelho); }
.btn-perigo { background: var(--vermelho); color: #fff; }
/* serviço: ícone, peças e mão de obra com quantidade */
.icos { display: flex; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; }
.icos button { width: 44px; height: 44px; border-radius: 50%; background: var(--s1); display: grid; place-items: center; color: var(--apoio); border: 2px solid transparent; }
.icos button.on { border-color: var(--marca); color: var(--tx); background: var(--s2); }
.icos svg { width: 20px; height: 20px; }
.sec-p { margin: 18px 0 2px; }
.sec-p h2 { font-size: 16px; }
.it-l { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.lista > .it-l + .it-l { border-top: 1px solid var(--fio); }
.it-l .meio { flex: 1; min-width: 0; }
.it-l .t { font-weight: 600; font-size: 15px; }
.it-l .s { font-size: 14px; color: var(--apoio); }
.step { display: flex; align-items: center; gap: 2px; background: var(--s1); border-radius: 10px; flex: none; }
.step button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--apoio); }
.step svg { width: 16px; height: 16px; }
.step b { min-width: 20px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.acrescentar { margin-top: 16px; width: 100%; height: 48px; border-radius: 10px; border: 1px dashed var(--s3); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.acrescentar svg { width: 18px; height: 18px; }
.dica-cat { color: var(--terc); font-size: 14px; margin: 16px 0 0; }
.folha .lista-sel.lista { gap: 0; }
.folha .lista-sel .linha { padding: 10px 0; }
.it-l [data-preco-de] { cursor: pointer; }

/* ---------- Orçamentos: cartão das métricas no estilo do cartão amarelo do Início (fundador, 13/10) ---------- */
.res { background: var(--marca); color: var(--sobre-marca); }
.res .met { background: rgba(0, 0, 0, .08); }
.res .met button { color: rgba(0, 0, 0, .6); }
.res .met button.on { background: var(--sobre-marca); color: var(--marca); }
.res .leia { color: inherit; opacity: .72; }
.res .grafico .col { fill: var(--sobre-marca); }
.res .grafico .col.zero { fill: rgba(0, 0, 0, .15); }
.res .grafico .grade { stroke: rgba(0, 0, 0, .1); }
.res .grafico .base { stroke: rgba(0, 0, 0, .2); }
.res .grafico text { fill: rgba(0, 0, 0, .55); }
.res .fl-t, .res .fl-v { color: inherit; opacity: .72; }
.res .fl-trilho { background: rgba(0, 0, 0, .08); }
.res .fl-barra { background: rgba(0, 0, 0, .4); }
.res .fl-barra.ok { background: var(--sobre-marca); }
.res .espera { border-top-color: rgba(0, 0, 0, .12); color: inherit; }
.res .espera span { opacity: .8; }
.res .espera b { color: inherit; }
.res .espera svg { color: inherit; opacity: .6; }
.res .tab th { color: rgba(0, 0, 0, .55); }
.res .tab td { border-top-color: rgba(0, 0, 0, .1); color: rgba(0, 0, 0, .7); }
.res .tab td:first-child, .res .tab td:last-child { color: var(--sobre-marca); }
.res > .carregando { color: var(--sobre-marca); }
/* clientes (fundador, 13/10): "+" redondo como o de Orçamentos; veículo com ano e km lado a lado */
.fab-mic svg.lucide-plus { width: 30px; height: 30px; stroke-width: 2.6; }
.duas-campo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg2 button svg { width: 16px; height: 16px; }
/* sugestões de modelo no lugar da lista nativa (fundador, 13/10): menu preso ao campo, por cima do resto,
   tom acima da folha + sombra neutra (sem borda), abre descendo da seta */
.combo { position: relative; }
.combo-seta { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; flex: none; color: var(--apoio); }
.combo-seta svg { width: 20px; height: 20px; transition: transform .18s ease; }
.combo.aberto .combo-seta { color: var(--marca); }
.combo.aberto .combo-seta svg { transform: rotate(180deg); }
.sugest { position: absolute; z-index: 5; top: calc(100% - 4px); left: 0; right: 0; padding: 4px; background: var(--s3); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6); max-height: min(300px, 44dvh); overflow: auto; overscroll-behavior: contain;
  transform-origin: top center; animation: desce .16s cubic-bezier(.2, .8, .2, 1); }
@keyframes desce { from { opacity: 0; transform: translateY(-6px) scaleY(.94); } }
.sugest .cab { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--terc); }
.sugest button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; }
.sugest button:active { background: rgba(255, 255, 255, .07); }
.sugest .thumb { width: 44px; height: 30px; }
.sugest b { font-size: 15px; font-weight: 600; }
.sugest mark { background: none; color: var(--marca); }
.sugest span:last-child { margin-left: auto; font-size: 13px; color: var(--apoio); }
.link-mao { display: block; width: 100%; margin-top: 12px; padding: 8px; color: var(--apoio); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Moto/Carro do cadastro: dois cartões de escolha com o desenho e o check amarelo (fundador, 13/10) */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.escolha button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 12px;
  background: var(--s2); border: 2px solid transparent; color: var(--apoio); transition: border-color .15s, background .15s; }
.escolha button.on { border-color: var(--marca); background: var(--s3); color: var(--tx); }
.escolha .esc-img { width: 84px; height: 52px; display: grid; place-items: center; opacity: .5; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.escolha .esc-img svg, .escolha .esc-img img { width: 100%; height: 100%; object-fit: contain; }
.escolha button.on .esc-img { opacity: 1; filter: none; }
.escolha b { font-size: 15px; font-weight: 600; }
.escolha .esc-ok { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca);
  display: none; place-items: center; }
.escolha .esc-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.escolha button.on .esc-ok { display: grid; }
/* montar serviço (fundador, 13/10): o serviço ganha cara no topo (ícone grande + nome), ícones com nome, Peças e Mão de
   obra em blocos com subtotal e o próprio "acrescentar", sugestões do catálogo pelo nome */
.serv-hero { display: grid; justify-items: center; gap: 6px; margin: 10px 0 0; text-align: center; }
.serv-big { width: 76px; height: 76px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; color: var(--tx); margin-bottom: 8px; }
.serv-big svg { width: 34px; height: 34px; stroke-width: 1.8; }
.serv-big.pop { animation: pop .3s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes pop { from { transform: scale(.8); } }
.serv-hero input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--s3); outline: none; text-align: center;
  font-size: 24px; font-weight: 700; letter-spacing: -.01em; padding: 4px 0 10px; border-radius: 0; }
.serv-hero input:focus { border-bottom-color: var(--marca); }
.serv-hero input::placeholder { color: var(--terc); font-weight: 600; }
.serv-hero small { font-size: 13px; color: var(--terc); }
.icos2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 22px 0 0; }
.icos2 button { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--terc); }
.icos2 .c { width: 48px; height: 48px; border-radius: 50%; background: var(--s1); display: grid; place-items: center; color: var(--apoio);
  border: 2px solid transparent; transition: border-color .15s, background .15s; }
.icos2 .c svg { width: 22px; height: 22px; }
.icos2 button.on { color: var(--tx); font-weight: 600; }
.icos2 button.on .c { border-color: var(--marca); background: var(--s2); color: var(--tx); }
.sec-s { margin: 30px 0 2px; }
.sec-s h2 { font-size: 17px; }
.sec-s > span { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.add-l { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 0; color: var(--marca); font-weight: 600; font-size: 15px; text-align: left; }
.add-l svg { width: 20px; height: 20px; }
.lista > * + .add-l { border-top: 1px solid var(--fio); }
.sug-cab { font-size: 12px; color: var(--terc); margin: 2px 0 6px; }
/* cliente que já existe com o nome ou o WhatsApp digitado: aparece em destaque, com o visto, e o botão passa a usá-lo */
#fc-ja .lista-sel .linha.ja-salvo { background: var(--s2); border-radius: 12px; padding: 10px 12px; }
#fc-ja .ja-ok { color: var(--verde); margin-left: auto; }
#fc-ja .link-mao { margin: 2px 0 10px; text-align: left; padding: 6px 2px; }
.sug-l { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 2px; scrollbar-width: none; }
.sug-l::-webkit-scrollbar { display: none; }
.sug-l button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px;
  background: var(--s1); font-size: 14px; font-weight: 500; white-space: nowrap; }
.sug-l button svg { width: 16px; height: 16px; color: var(--marca); }
.sug-l button span { color: var(--apoio); margin-left: 2px; }
.btn.off { opacity: .45; }
.linha .marca-ic { color: var(--marca); width: 22px; height: 22px; flex: none; }
/* topo do Catálogo (fundador, 13/10): Moto/Carro em cartões baixos com o desenho; abas sublinhadas em amarelo */
.escolha-mini { margin: 6px 0 6px; }
.escolha-mini button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 30px 8px 12px; }
.escolha-mini .esc-img { width: 54px; height: 34px; }
.escolha-mini .esc-ok { top: calc(50% - 9px); right: 10px; width: 18px; height: 18px; }
.escolha-mini .esc-ok svg { width: 12px; height: 12px; }
.abas { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--fio); margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { position: relative; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--apoio); white-space: nowrap; }
.abas button.on { color: var(--tx); }
.abas button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--marca); }
/* cliente (fundador, 13/10): cabeçalho curto com os dados; a linha do tempo é a protagonista */
.cli-topo { display: flex; align-items: center; gap: 14px; margin: 2px 0 0; }
.cli-av { width: 56px; height: 56px; font-size: 20px; font-weight: 700; }
.cli-id { min-width: 0; }
.cli-id h1 { margin: 0 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.cli-id span { font-size: 14px; color: var(--apoio); }
.cli-id em { font-style: normal; font-size: 14px; }
.cli-acoes { display: flex; gap: 8px; margin: 14px 0 0; }
.acao-p { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--s1);
  font-size: 14px; font-weight: 600; color: var(--tx); text-decoration: none; }
.acao-p svg { width: 16px; height: 16px; }
.acao-p .wa-logo { color: var(--wa); }
.sec-tl { margin-top: 30px; margin-bottom: 14px; }
.sec-tl > span { font-size: 13px; color: var(--apoio); }
.tl2 { padding-left: 28px; }
.tl2::before { left: 6px; top: 10px; bottom: 28px; }
.tl2 .tl-i { padding: 0 0 24px; }
.tl2 .tl-i::before { left: -28px; top: 2px; width: 14px; height: 14px; border: 3px solid var(--bg); }
.tl2 .tl-i.enviado::before { background: var(--marca); }
.tl2 .tl-i.orcamento::before { background: var(--vermelho); }
.tl2 .tl-d { display: block; font-size: 13px; color: var(--apoio); }
.tl2 .tl-d .st { font-style: normal; font-weight: 600; }
.tl2 .tl-d .st.env { color: var(--blue); }
.tl2 .tl-d .st.ok { color: var(--verde); }
.tl2 .tl-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 3px; color: var(--tx); font-size: 17px; }
.tl2 .tl-l b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl2 .tl-l strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl2 .tl-s { display: block; font-size: 13px; color: var(--terc); margin-top: 2px; }
.tl-vazio { color: var(--terc); font-size: 14px; padding: 4px 0; }
.tl2:has(> .tl-i:only-child)::before { display: none; }

/* ---------- movimento (fundador, 13/10: "cara premium, animações como app nativo de iPhone") ----------
   curva das folhas e telas do iOS (--curva); troca de tela com a cópia congelada da tela velha ("fantasma") */
body { background: transparent; overflow-x: clip; }
.fantasma { position: fixed; inset: 0; z-index: -1; overflow: hidden; contain: layout paint; background: var(--bg); pointer-events: none; }
.fantasma.por-cima { z-index: 30; }
.fantasma.sobre-nav { bottom: calc(var(--nav-h) + var(--bot)); }
.fantasma-fundo { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.fantasma-sombra { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); pointer-events: none; }
.fantasma-sombra.solta { position: fixed; z-index: 19; }

/* folhas: sobem com mola, descem ao fechar, acompanham o dedo */
.veu { animation: veu-entra .3s ease backwards; }
.veu.saindo { animation: veu-sai .3s ease forwards; pointer-events: none; }
.folha { animation: folha-sobe .5s var(--curva) backwards; }
.veu.saindo .folha { animation: folha-desce .32s var(--curva) forwards; }
@keyframes veu-entra { from { opacity: 0; } }
@keyframes veu-sai { to { opacity: 0; } }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-desce { to { transform: translateY(100%); } }

/* toque: encolhe de leve e volta com mola; linhas de lista apagam um pouco */
.btn, .acao-p, .mais, .fab-mic, .add-l, .acrescentar, .sug-l button, .escolha button, .icos2 button, .chip, .icon-btn, .step button, .qtd button,
.nav a .ico, .linha, .tl-i { transition: scale .4s var(--curva), opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
:is(.btn, .acao-p, .mais, .fab-mic, .add-l, .acrescentar, .sug-l button, .escolha button, .icos2 button, .chip, .icon-btn):active:not(:disabled) { scale: .96; transition-duration: .1s; }
:is(.step, .qtd) button:active { scale: .88; transition-duration: .1s; }
.nav a:active .ico { scale: .88; transition-duration: .1s; }
:is(.linha, .tl-i):active { opacity: .55; transition-duration: .05s; }

/* marcador que desliza nos seletores e nas abas */
.seg, .abas { position: relative; isolation: isolate; }
.seg > .ind, .abas > .ind { position: absolute; left: 0; z-index: -1; pointer-events: none; transition: transform .45s var(--curva), width .45s var(--curva); }
.seg > .ind { top: 3px; bottom: 3px; border-radius: 8px; background: var(--s3); }
.seg.com-ind > button.on { background: transparent; }
.res .met > .ind { background: var(--sobre-marca); }
.abas > .ind { bottom: -1px; height: 2px; border-radius: 2px; background: var(--marca); }
.abas.com-ind > button.on::after { display: none; }

/* cabeçalho das telas de passo preso no topo; fio quando a tela rola */
.passo-cab { position: sticky; top: 0; z-index: 15; background: var(--bg); margin: calc(-1 * (var(--top) + 8px)) calc(-1 * var(--pad)) 0;
  padding: calc(var(--top) + 8px) var(--pad) 0; transition: box-shadow .2s ease; }
html.rolou .passo-cab { box-shadow: 0 1px 0 var(--fio); }
/* título grande que vira pequeno no topo */
/* aviso entra com mola */
.toast { transition: opacity .25s ease, transform .5s var(--curva); transform: translateX(-50%) translateY(20px) scale(.94); }
.toast.on { transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .veu, .veu.saindo, .folha, .veu.saindo .folha { animation: none; }
  .seg > .ind, .abas > .ind, .toast { transition: none; }
  .troca { animation: none; }
}

/* situação nas listas (fundador, 13/10): só a palavra; falta enviar = vermelho, esperando cliente = amarelo,
   aprovado e feito = verde */
.situ { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--vermelho); }
.situ.enviado { color: var(--marca); }
.situ.aprovado, .situ.feito { color: var(--verde); }

/* movimento, fase 2 (fundador, 13/10): esqueleto pulsando no lugar do "Carregando…"; barras e colunas crescem */
.esq { padding: 4px 0; }
.esq i { display: block; height: 12px; border-radius: 6px; background: var(--s2); animation: pulsa 1.4s ease-in-out infinite; }
.esq-l { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.esq-l + .esq-l { border-top: 1px solid var(--fio); }
.esq-l .c { width: 44px; height: 30px; border-radius: 8px; flex: none; }
.esq-l span { flex: 1; display: grid; gap: 8px; }
.esq-faixa { display: grid; gap: 10px; padding: 2px 0 8px; }
.esq-faixa i { background: rgba(0, 0, 0, .12); }
.esq-faixa i.g { height: 30px; border-radius: 8px; }
@keyframes pulsa { 50% { opacity: .45; } }
.heroi { font-variant-numeric: tabular-nums; }
.barra-d i, .fl-barra { transform-origin: left center; animation: cresce-x .9s var(--curva) backwards; }
.grafico .col { transform-box: fill-box; transform-origin: center bottom; animation: cresce-y .8s var(--curva) backwards; }
@keyframes cresce-x { from { transform: scaleX(0); } }
@keyframes cresce-y { from { transform: scaleY(0); } }
.fantasma.borda { z-index: -1; transform: translateX(-30%); }
@media (prefers-reduced-motion: reduce) {
  .esq i, .barra-d i, .fl-barra, .grafico .col { animation: none; }
}

/* Confira (fundador, 13/10): prévia editável numa tela só — título, cliente e veículo tocáveis, itens com − N + */
.cf-tit { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; border-bottom: 1px solid var(--fio); cursor: text; }
.cf-tit:focus-within { border-bottom-color: var(--marca); }
.cf-tit svg { order: 2; width: 18px; height: 18px; color: var(--terc); flex: none; }
.cf-tit input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  padding: 6px 0 12px; text-overflow: ellipsis; }
.cf-tit input::placeholder { color: var(--terc); }
.cf-quem .ini { margin: 0 8px; }
.cf-quem .cf-vazio { background: none; border: 1.5px dashed var(--s3); color: var(--marca); }
.cf-quem .cf-vazio svg { width: 18px; height: 18px; }
.cf-falta { color: var(--marca); }
.cf-sug { margin-top: 22px; }
.cf-falou { margin-top: 18px; color: var(--terc); font-size: 14px; }
.cf-falou summary { cursor: pointer; font-weight: 600; color: var(--apoio); list-style: none; }
.cf-falou summary::-webkit-details-marker { display: none; }
.cf-falou summary::after { content: " ›"; }
.cf-falou[open] summary::after { content: " ⌄"; }
.cf-falou p { margin: 8px 0 0; line-height: 1.45; }
.cf-tira { color: var(--vermelho); }
.barra-in .tot small { font-size: 13px; font-weight: 500; }
.folha .seg { background: var(--s2); margin-top: 4px; }

/* orçamento salvo (fundador, 13/10): situação, título e total grandes; PDF; andamento com o próximo passo; envio verde */
.orc-topo { margin: 6px 0 14px; }
.orc-topo .situ { font-size: 15px; font-weight: 600; }
.orc-topo h1 { margin: 4px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.orc-topo .heroi small { font-size: 24px; }
.pdf-ic { width: 40px; height: 40px; margin: 0 8px; display: grid; place-items: center; color: var(--apoio); flex: none; }
.pdf-ic svg { width: 24px; height: 24px; }
.it-v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-obs { margin: 4px 0 0; color: var(--apoio); white-space: pre-wrap; }
.barra-in.coluna { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 4px; }
.barra-in.coluna .link-mao { margin-top: 2px; padding: 8px; }
.btn-wa:disabled { opacity: .5; }

/* andamento (fundador, 13/10): nó com ícone por passo; linha feita na cor do passo, tracejada no que falta; o passo de
   agora diz há quanto tempo; o próximo traz o botão de marcar */
.tl3 { list-style: none; margin: 10px 0 0; padding: 0; }
.tl3 li { --c: var(--apoio); position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.tl3 li:last-child { padding-bottom: 0; }
.tl3 li.enviado { --c: var(--marca); }
.tl3 li.aprovado, .tl3 li.feito { --c: var(--verde); }
/* o trecho de um nó ao próximo: cheio na cor do próximo quando ele está feito, tracejado quando falta */
.tl3 li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; border-left: 2px dashed var(--s3); }
.tl3 li:has(+ li.ok)::after { border-left-style: solid; border-color: var(--apoio); }
.tl3 li:has(+ li.ok.enviado)::after { border-color: var(--marca); }
.tl3 li:has(+ li.ok.aprovado)::after, .tl3 li:has(+ li.ok.feito)::after { border-color: var(--verde); }
.tl3 .no { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--s3); color: var(--terc); }
.tl3 .no svg { width: 18px; height: 18px; }
.tl3 li.ok .no { background: var(--c); box-shadow: none; color: var(--bg); }
.tl3 li.atual .no { outline: 2px solid color-mix(in srgb, var(--c) 35%, transparent); outline-offset: 3px; }
.tl3 li.prox .no { box-shadow: inset 0 0 0 2px var(--apoio); color: var(--apoio); }
.tl3 .tx { flex: 1; min-width: 0; padding-top: 7px; display: grid; gap: 3px; }
.tl3 .tx b { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--terc); }
.tl3 li.ok .tx b, .tl3 li.prox .tx b { color: var(--tx); }
.tl3 li.prox .tx b { font-weight: 500; }
.tl3 .tx span { font-size: 14px; color: var(--apoio); }
.tl3 .tx em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--c); }
.tl3 .tl-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tl3 .acao-p { background: var(--s2); }
.tl3 .acao-p .wa-logo { color: var(--wa); }
/* o passo que acabou de ser marcado: o trecho enche de cima para baixo e o nó salta */
.tl3 li:has(+ li.novo)::after { transform-origin: top; animation: enche .45s var(--curva) both; }
.tl3 li.novo .no { animation: salta .5s .3s cubic-bezier(.2, .8, .2, 1.4) both; }
@keyframes enche { from { transform: scaleY(0); } }
@keyframes salta { 0% { transform: scale(.4); background: var(--bg); } 60% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .tl3 li:has(+ li.novo)::after, .tl3 li.novo .no { animation: none; } }
/* aviso com ação (Desfazer) e acima das barras fixas */
.toast.com-acao { display: flex; align-items: center; gap: 16px; text-align: left; }
.toast.com-acao.on { pointer-events: auto; }
.toast-acao { color: var(--marca); font-weight: 700; font-size: 14px; padding: 4px 0; }
body:has(.barra-fixa) .toast { bottom: calc(var(--bot) + 126px); }
.toast.com-acao { width: max-content; }
.folha .linha .situ { font-size: 16px; font-weight: 600; }
.tl2 .tl-d .situ { display: inline; } /* data e situação na mesma linha na ficha do cliente */