/* Orçamento/OS — identidade D "Talão na conversa", paleta curta (design.md §1b, 25/09/2026).
 * Neutros + UMA cor de ação (laranja). Carmim só no carimbo e no nº do documento.
 * Ações da oficina em tinta cheia; secundárias em contorno de tinta; status em tag neutra.
 * Hex só os da paleta; tons intermediários saem de color-mix dos próprios tokens. */

:root {
  /* neutros */
  --paper:#FBFCFE; --surface:#FFFFFF; --rule:#E3E7EF;
  --ink:#16233F;   --ink-2:#4A5878;
  --paper-2: color-mix(in srgb, var(--ink) 4%, var(--paper));     /* toque, tag, faixa */
  --rule-2:  color-mix(in srgb, var(--ink) 30%, var(--surface));  /* borda de campo (3:1) */
  /* ação da oficina: tinta cheia */
  --solid: var(--ink); --solid-hi: color-mix(in srgb, var(--ink) 86%, var(--surface)); --solid-ink:#FFFFFF;
  /* a única cor: laranja de ação / envio */
  --flare:#F2711C; --flare-hi: color-mix(in srgb, var(--flare) 90%, var(--ink)); --flare-lo: color-mix(in srgb, var(--flare) 80%, var(--ink));
  --flare-ink:#16233F;    /* texto sobre laranja: 5,3:1 */
  --flare-text:#9A4209;   /* laranja como texto sobre claro: 5,8:1 */
  /* carmim: só carimbo e nº do documento */
  --stamp:#B3122E;
  /* conversa */
  --bubble-out: var(--surface); --bubble-out-line: var(--rule);
  --conv-bg: var(--paper-2);
  --pauta: color-mix(in srgb, var(--rule) 55%, transparent);
  /* documento (é o PDF: papel claro nos dois temas, tinta + carmim) */
  --doc:#FFFFFF; --doc-ink:#16233F; --doc-ink-2:#4A5878; --doc-rule:#E3E7EF; --doc-stamp:#B3122E;
  --doc-perf: color-mix(in srgb, #16233F 3%, #FFFFFF);
  /* aviso e status: neutros */
  --tag: var(--ink-2); --tag-bg: var(--paper-2);
  --scrim: color-mix(in srgb, var(--ink) 38%, transparent);
  --toast: var(--ink); --toast-ink: var(--surface);
  --focus: var(--ink);

  /* tipografia */
  --f-text:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-num:"Martian Mono","Courier New",monospace;

  /* espaço (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px;
  --gutter:16px;

  /* forma */
  --r-doc:0;
  --r-stamp:4px;
  --r-bubble:20px; --r-bubble-tail:6px;
  --r-panel:24px;
  --r-sheet:26px 26px 0 0;
  --r-bar-top:22px 22px 0 0;
  --r-toast:18px;
  --r-field:14px;
  --r-pill:999px;
  --r-press:18px;
  --shadow-doc:3px 3px 0 var(--rule);
  --shadow-sheet:0 -3px 0 var(--rule);
  --line-total:3px double var(--rule-2);
  --tap:48px; --tap-btn:52px;

  /* movimento */
  --t-tap:150ms; --t-state:300ms;
  --ease-out:cubic-bezier(.2,.9,.3,1.15);
  --ease-sheet:cubic-bezier(.2,.9,.3,1);
  --ease-stamp:cubic-bezier(.2,.9,.3,1.2);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-io:ease-in-out;

  --bar-h:132px;

  /* v3 — assinatura (20-design-v3-assinatura.md §3) */
  --ring: color-mix(in srgb, var(--ink) 12%, transparent);
  --ok-bg: var(--ink); --ok-ink: var(--surface);
  --erro-bg: color-mix(in srgb, var(--flare) 9%, var(--surface));
  --erro-line: color-mix(in srgb, var(--flare) 55%, var(--surface));
  --info-bg: var(--paper-2);
  --shadow-ticket: 3px 3px 0 var(--rule);
  --perf: var(--paper);
  --s8: 56px;
  --r-cell: 12px;
  --field-h: 56px; --btn-h: 56px;
  --e-soft: cubic-bezier(.2,.9,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --paper:#0E1424; --surface:#151D33; --rule:#26304D;
    --ink:#E6EAF5;   --ink-2:#A3AECB;
    --paper-2: color-mix(in srgb, var(--ink) 6%, var(--paper));
    --rule-2:  color-mix(in srgb, var(--ink) 32%, var(--surface));
    --solid-ink:#0E1424;
    --flare:#FF8A3D; --flare-ink:#0E1424; --flare-text:#FF9A57;   /* 7,8:1 e 8,7:1 */
    --stamp:#FF5C7A;        /* nº fora do documento; sobre o documento continua --doc-stamp */
    --doc:#F3F5FA;
    --scrim: rgba(0,0,0,.55);
    --ring: color-mix(in srgb, var(--ink) 18%, transparent);
    --erro-bg: color-mix(in srgb, var(--flare) 12%, var(--surface));
    --erro-line: color-mix(in srgb, var(--flare) 50%, var(--surface));
    --shadow-ticket: 3px 3px 0 #070B16;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#0E1424; --surface:#151D33; --rule:#26304D;
  --ink:#E6EAF5;   --ink-2:#A3AECB;
  --paper-2: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --rule-2:  color-mix(in srgb, var(--ink) 32%, var(--surface));
  --solid-ink:#0E1424;
  --flare:#FF8A3D; --flare-ink:#0E1424; --flare-text:#FF9A57;
  --stamp:#FF5C7A;
  --doc:#F3F5FA;
  --scrim: rgba(0,0,0,.55);
  --ring: color-mix(in srgb, var(--ink) 18%, transparent);
  --erro-bg: color-mix(in srgb, var(--flare) 12%, var(--surface));
  --erro-line: color-mix(in srgb, var(--flare) 50%, var(--surface));
  --shadow-ticket: 3px 3px 0 #070B16;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--f-text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.money, .mono { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.money { white-space: nowrap; }

.casca { max-width: 560px; margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ telas */
.tela { display: none; }
/* Só opacidade na tela: transform aqui viraria bloco de contenção das barras fixas. */
.tela.ativa { display: block; animation: tela-entra 220ms var(--ease-out) backwards; }
.tela.ativa > main { animation: tela-sobe 220ms var(--ease-out) backwards; }
@keyframes tela-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes tela-sobe { from { transform: translateY(8px); } to { transform: none; } }

/* ------------------------------------------------------------------ cabeçalho: picote + barra de tinta */
.topo { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
.topo .casca { display: flex; align-items: center; gap: var(--s2); min-height: 68px; padding-block: 10px; }
.topo .casca > .icone-btn:first-child { margin-left: -10px; }
.topo .casca > .icone-btn:last-child { margin-right: -10px; }
.topo-texto { flex: 1; min-width: 0; }
.eyebrow { font: 600 10.5px/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 5px; }
.topo-nome {
  font: 800 19px/1.15 var(--f-text); letter-spacing: -.01em; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-no { flex: none; font: 600 12px/1 var(--f-num); color: var(--stamp); font-variant-numeric: tabular-nums; }
.icone-btn {
  flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: transparent; color: inherit;
  transition: background var(--t-tap) ease-out, transform var(--t-tap) ease-out;
}
.icone-btn:active { background: var(--paper-2); transform: scale(.94); }
.icone-btn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ botões: pílula */
.btn-main {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: var(--tap-btn); padding: 0 var(--s5); border: 0; border-radius: var(--r-pill);
  background: var(--solid); color: var(--solid-ink); text-decoration: none;
  font: 600 16px/1.1 var(--f-text); text-align: center;
  transition: background-color var(--t-state) var(--ease-io), color var(--t-state) var(--ease-io),
              border-radius 220ms ease-out, transform var(--t-tap) ease-out;
}
.btn-main:active { background: var(--solid); border-radius: var(--r-press); transform: scale(1.02); }
@media (hover: hover) { .btn-main:hover { background: var(--solid-hi); } }
/* laranja: só o que sai para o cliente */
.btn-main--envio { background: var(--flare); color: var(--flare-ink); }
@media (hover: hover) { .btn-main--envio:hover { background: var(--flare-hi); } }
.btn-main--envio:active { background: var(--flare-lo); }
/* carregando: mantém a cor do botão e gira um anel antes do texto */
.btn-main.carregando, .btn-main.carregando:disabled { background: var(--solid); color: var(--solid-ink); cursor: progress; }
.btn-main--envio.carregando, .btn-main--envio.carregando:disabled { background: var(--flare); color: var(--flare-ink); }
.btn-main.carregando::before, .btn-cont.carregando::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: gira 700ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.btn-main:disabled { background: var(--paper-2); color: var(--ink-2); transform: none; border-radius: var(--r-pill); cursor: default; }

.btn-cont {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-pill);
  border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: transparent; color: var(--ink);
  font: 600 15.5px/1.2 var(--f-text); text-align: center; text-decoration: none;
  transition: background-color var(--t-state) var(--ease-io), border-radius 220ms ease-out, transform var(--t-tap) ease-out;
}
.btn-cont:active { background: var(--paper-2); border-radius: var(--r-press); transform: scale(1.02); }
.btn-cont:disabled { color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--rule-2); cursor: default; transform: none; }

.btn-txt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: 600 15px/1.2 var(--f-text);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: background var(--t-tap) ease-out;
}
.btn-txt:active { background: var(--paper-2); }
.btn-txt:disabled { color: var(--ink-2); cursor: default; }
/* ação que apaga: tinta forte, sem cor de alarme (carmim é só do papel) */
.btn-txt--perigo { color: var(--ink); text-decoration-thickness: 2px; text-decoration-style: double; }
.btn-perigo { background: var(--ink); color: var(--paper); }
.btn-perigo:active { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .btn-perigo:hover { background: var(--ink); } }

/* ------------------------------------------------------------------ campos */
.campo { display: block; margin-bottom: var(--s4); }
.rotulo { display: block; font: 400 11.5px/1.2 var(--f-text); color: var(--ink-2); margin-bottom: 6px; }
.entrada {
  display: block; width: 100%; min-height: var(--tap-btn); padding: 12px 14px;
  font: 600 16px/1.3 var(--f-text);
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--rule-2); border-radius: var(--r-field);
  transition: border-color 200ms var(--ease-io), box-shadow 200ms var(--ease-io);
}
.entrada.mono { font-family: var(--f-num); font-weight: 600; }
textarea.entrada { resize: vertical; min-height: 72px; }
.entrada::placeholder { color: var(--ink-2); opacity: .75; font-weight: 400; }
.entrada:focus { outline: none; border: 2px solid var(--ink); padding: 11.5px 13.5px; box-shadow: 0 0 0 3px var(--paper-2); }
.entrada[aria-invalid="true"] { border: 2px dashed var(--ink); padding: 11.5px 13.5px; }
.entrada:disabled { background: var(--paper-2); }
/* Estado de erro: componente, não texto solto (fabrica/padroes/design.md §1c).
 * Sem cor nova: o acento é o --flare da paleta (a única cor), o fundo sai de color-mix dele.
 * O ícone é pseudo-elemento, então o JS continua trocando só o textContent.
 * Entra com animação curta toda vez que deixa de estar hidden. */
.erro-campo {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.35; margin: 6px 0 0;
  animation: erro-entra 220ms var(--ease-out) both;
}
.erro-campo::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px;
  border-radius: 50%; background: var(--flare); color: var(--flare-ink); font: 600 11px/1 var(--f-num);
}
/* .alerta é o mesmo componente (barras e sheets: #of-alerta, #orc-alerta, #conf-alerta) */
.msg-erro, .alerta {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: color-mix(in srgb, var(--flare) 9%, var(--surface)); color: var(--ink);
  border: 1.5px solid var(--erro-line);
  border-radius: var(--r-field); padding: 14px; margin: 0 0 var(--s3);
  font-weight: 600; font-size: 14.5px; line-height: 1.4;
  animation: erro-entra 240ms var(--e-soft) both;
}
/* Ícone ph-warning-circle (Phosphor) como máscara: o JS continua trocando só o texto. */
.msg-erro::before, .alerta::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: -1px;
  background: var(--flare-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.msg-erro > span { flex: 1 1 60%; min-width: 0; padding-top: 2px; }
.msg-erro > .btn-txt { flex: none; margin: -10px -6px -10px auto; color: var(--ink); align-self: center; }
/* Nada treme (interacao.md): só aparece e desce 4px. */
@keyframes erro-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.ajuda { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; margin: var(--s2) 0 0; }
.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  background: var(--paper-2); color: var(--ink); border-radius: var(--r-field);
  padding: var(--s2) var(--s3); margin: var(--s3) 0 0; font-size: 14px;
}
.aviso .btn-txt { color: var(--ink); padding: 0 var(--s2); }

.secao { font: 600 10.5px/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: var(--s6) 0 var(--s3); }
.titulo-tela { font: 800 22px/1.2 var(--f-text); letter-spacing: -.01em; margin: var(--s5) 0 var(--s2); }

/* ------------------------------------------------------------------ assinatura v3
 * As 4 telas do fluxo de assinatura: Entrada, Assinar, Volta do Mercado Pago, Acesso parado
 * (20-design-v3-assinatura.md). Tudo escopado em .v3 para não mexer no resto do app. */
.v3 .casca { max-width: 420px; padding-bottom: var(--s7); }
.tela.v3.ativa > .casca { animation: tela-sobe 260ms var(--e-soft) backwards; }
.v3 .ic { width: 20px; height: 20px; fill: currentColor; flex: none; display: block; }

.v3-barra { display: flex; align-items: center; gap: var(--s2); min-height: 64px; }
.v3-marca { flex: 1; display: flex; align-items: center; gap: var(--s2); font: 800 15.5px/1 var(--f-text); letter-spacing: -.01em; }
.v3-marca--centro { justify-content: center; }
.v3-marca-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.v3-marca-ic svg { width: 18px; height: 18px; }
.v3 .v3-voltar { margin-left: -12px; color: var(--ink); }
.v3 .v3-voltar .ic { width: 22px; height: 22px; }
.v3-passo { font: 600 11px/1 var(--f-num); letter-spacing: .06em; color: var(--ink-2); }
.v3-oficina-top { flex: 1; min-width: 0; }
.v3-oficina-top .eyebrow { margin: 0 0 4px; letter-spacing: .1em; }
.v3-oficina-top p:last-child { margin: 0; font: 800 16px/1.2 var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3 .eyebrow { letter-spacing: .1em; }

/* etapas */
.v3-etapas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v3-etapas li { display: grid; gap: var(--s2); font: 600 12px/1.2 var(--f-text); color: var(--ink-2); }
.v3-etapas .trilho { height: 4px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.v3-etapas .trilho i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 450ms var(--e-soft); }
.v3-etapas li.feita .trilho i, .v3-etapas li.atual .trilho i { transform: scaleX(1); }
.v3-etapas li.atual .trilho i { background: var(--flare); }
.v3-etapas li.feita, .v3-etapas li.atual { color: var(--ink); }
.v3-etapas .nome { display: flex; align-items: center; gap: 5px; }
.v3-etapas .nome .ic { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity 250ms, transform 300ms var(--ease-out); }
.v3-etapas li.feita .nome .ic { opacity: 1; transform: none; }

/* tipografia */
.v3 h1 { font: 800 clamp(28px, 8.2vw, 34px)/1.06 var(--f-text); letter-spacing: -.028em; margin: var(--s6) 0 var(--s3); color: var(--ink); text-wrap: balance; }
.v3-lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 34ch; text-wrap: pretty; }

/* talão: papel reto, picote no topo, sombra dura */
.v3-talao { position: relative; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-ticket); margin: var(--s6) 0 0; padding: 22px 18px 16px; }
.v3-talao::before { content: ""; position: absolute; left: -1px; right: -1px; top: -6px; height: 12px;
  background: radial-gradient(circle at 6px 6px, var(--perf) 4px, transparent 4.5px) -1px 0 / 14px 12px repeat-x; }
.v3-talao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.v3-plano-nome { font: 800 21px/1.15 var(--f-text); letter-spacing: -.015em; margin: var(--s2) 0 2px; }
.v3-plano-sub { font-size: 14px; color: var(--ink-2); margin: 0; }
.v3-preco { text-align: right; white-space: nowrap; margin: 0; }
.v3-preco b { display: block; font: 600 30px/1 var(--f-num); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.v3-preco span { font-size: 13px; color: var(--ink-2); }
.v3-talao-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--rule-2); font-size: 13.5px; color: var(--ink-2); }
.v3-link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px -8px; padding: 0 8px; border: 0; background: none; color: var(--ink); font: 600 14px/1 var(--f-text); text-decoration: underline; text-underline-offset: 3px; border-radius: 8px; flex: none; }
.v3-link:active { background: var(--paper-2); }

/* campos (§4.1) */
.v3-form { margin-top: var(--s6); display: grid; gap: 20px; }
.v3-campo { display: grid; gap: var(--s2); }
.v3-rotulo { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px/1.2 var(--f-text); color: var(--ink); }
.v3-rotulo small { font: 400 12.5px/1 var(--f-text); color: var(--ink-2); }
.v3-caixa { position: relative; display: flex; align-items: center; min-height: var(--field-h); background: var(--surface); border: 1.5px solid var(--rule-2); border-radius: var(--r-field);
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out, background 200ms; }
.v3-caixa > .ic { margin-left: var(--s4); color: var(--ink-2); transition: color 200ms; }
.v3-caixa input { flex: 1; min-width: 0; height: calc(var(--field-h) - 3px); border: 0; background: transparent; outline: none; padding: 0 var(--s3); font: 600 16px/1 var(--f-text); color: var(--ink); }
.v3-caixa input::placeholder { color: var(--ink-2); opacity: .7; font-weight: 400; }
.v3-caixa:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--ring); }
.v3-caixa:focus-within > .ic, .v3-caixa.cheia > .ic { color: var(--ink); }
.v3-caixa.erro { border-style: dashed; border-color: var(--ink); box-shadow: 0 0 0 .5px var(--ink); }
.v3-caixa.erro:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--ring); }
.v3-caixa:has(input[readonly]) { background: var(--paper-2); border-color: var(--rule); }
.v3-selo { width: 22px; height: 22px; margin-right: 14px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok-bg); color: var(--ok-ink); opacity: 0; transform: scale(.5);
  transition: opacity 200ms, transform 300ms var(--ease-out); }
.v3 .v3-selo .ic { width: 13px; height: 13px; }
.v3-caixa.ok .v3-selo { opacity: 1; transform: none; }
.v3-dica { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); margin: 0; }
.v3-erro-campo { display: flex; gap: 6px; align-items: flex-start; font: 600 13.5px/1.35 var(--f-text); color: var(--ink); margin: 0; animation: erro-entra 220ms var(--e-soft) both; }
.v3 .v3-erro-campo .ic { width: 18px; height: 18px; color: var(--flare-text); }

/* bloco de erro nas 4 telas: o componente é o do app (.msg-erro), só o encaixe muda */
.v3 .msg-erro { margin: 0 0 var(--s3); }
.v3 .msg-erro > .btn-txt { text-decoration: underline; }
#parada-erro { margin: var(--s5) 0 0; }

/* aviso neutro (§4.3) */
.v3-info { display: flex; gap: var(--s3); align-items: flex-start; padding: 14px; border-radius: var(--r-field); background: var(--info-bg); font-size: 14px; line-height: 1.45; color: var(--ink); }
.v3 .v3-info > .ic { color: var(--ink-2); margin-top: 1px; }
#voltou-pronto .v3-info { margin-top: var(--s5); }

/* botões (§4.5) */
.v3-acoes { display: grid; gap: 10px; margin-top: var(--s5); }
.v3 .btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--btn-h); padding: 0 var(--s5); border: 0; border-radius: var(--r-pill);
  font: 600 16.5px/1 var(--f-text); background: var(--solid); color: var(--solid-ink); text-decoration: none;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-radius 220ms ease-out, transform 150ms ease-out, box-shadow 300ms; }
.v3 .btn:active { border-radius: var(--r-press); transform: scale(1.02); }
@media (hover: hover) { .v3 .btn:hover { background: var(--solid-hi); } }
.v3 .btn--pagar { background: var(--flare); color: var(--flare-ink); box-shadow: 3px 3px 0 color-mix(in srgb, var(--flare) 35%, var(--ink)); }
@media (hover: hover) { .v3 .btn--pagar:hover { background: var(--flare-hi); } }
.v3 .btn--pagar:active { background: var(--flare-lo); box-shadow: 1px 1px 0 color-mix(in srgb, var(--flare) 35%, var(--ink)); }
.v3 .btn .seta { transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .v3 .btn:hover .seta { transform: translateX(3px); } }
.v3 .btn:disabled { background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); transform: none; border-radius: var(--r-pill); cursor: default; }
.v3 .btn:disabled .seta { opacity: .5; }
.v3 .btn.carregando, .v3 .btn.carregando:disabled { cursor: progress; box-shadow: none; background: var(--solid); color: var(--solid-ink); }
.v3 .btn--pagar.carregando, .v3 .btn--pagar.carregando:disabled { background: var(--flare); color: var(--flare-ink); }
.v3 .btn.carregando .ic { display: none; }
.v3 .btn.carregando::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira 700ms linear infinite; }
.v3 .btn--cont { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); min-height: 52px; }
@media (hover: hover) { .v3 .btn--cont:hover { background: var(--paper-2); } }
.v3 .btn--cont:active { background: var(--paper-2); }
.v3 .btn--cont.carregando, .v3 .btn--cont.carregando:disabled { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.v3 .btn--cont:disabled:not(.carregando) { background: transparent; box-shadow: inset 0 0 0 2px var(--rule-2); }
.v3 .btn.sem-icone .ic { display: none; }

/* segurança */
.v3-seguro { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.v3 .v3-seguro .ic { width: 28px; height: 28px; color: var(--ink); }
.v3-seguro p { margin: 0; }
.v3-seguro b { display: block; font: 600 14.5px/1.3 var(--f-text); }
.v3-seguro span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* ícone de status (volta, entrada e corte) */
.v3-status { width: 64px; height: 64px; border-radius: 20px; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; margin-top: var(--s6); position: relative; }
.v3 .v3-status .ic { width: 34px; height: 34px; }
.v3-status.girando::after { content: ""; position: absolute; inset: -5px; border-radius: 24px; border: 2px solid transparent; border-top-color: var(--flare); border-right-color: var(--flare); animation: gira 1.1s linear infinite; }
.v3-status + h1, .v3 .v3-status + h1 { margin-top: var(--s5); }
.v3-status.troca { animation: status-troca 400ms var(--ease-out) both; }
@keyframes status-troca { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* código da oficina (volta pronta) */
.v3-bloco { animation: tela-sobe 300ms var(--e-soft) backwards; }
.v3-cod-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.v3-cod-topo .eyebrow { margin: 0; }
.v3-carimbo { flex: none; font: 600 13px/1 var(--f-num); letter-spacing: .14em; color: var(--stamp); border: 3px solid var(--stamp); border-radius: var(--r-stamp); padding: 6px 9px 5px; transform: rotate(-9deg); opacity: .9; }
.v3-carimbo.cai { animation: v3-carimbo 320ms var(--ease-stamp) 550ms both; }
@keyframes v3-carimbo { from { opacity: 0; transform: rotate(-9deg) scale(1.6); } to { opacity: .9; transform: rotate(-9deg) scale(1); } }
.v3-codigo { display: flex; gap: .18em; font: 600 clamp(32px, 10vw, 40px)/1 var(--f-num); letter-spacing: .02em; margin: 14px 0 18px; font-variant-numeric: tabular-nums; color: var(--ink); }
.v3-codigo .sep { width: .35em; }
.v3-codigo span { display: inline-block; }
.v3-codigo.cascata span { animation: v3-digito 280ms var(--e-soft) backwards; }
@keyframes v3-digito { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v3-linha-link { display: flex; align-items: center; gap: var(--s2); padding-top: 14px; border-top: 1px dashed var(--rule-2); }
.v3-linha-link > div { flex: 1; min-width: 0; }
.v3-linha-link .eyebrow { margin: 0; }
.v3-linha-link p:last-child { margin: 6px 0 0; font: 400 13px/1.4 var(--f-num); word-break: break-all; }
.v3-copiar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); transition: transform 150ms, background 200ms; }
.v3-copiar:active { transform: scale(.94); }

/* lista do que está guardado (corte) */
.v3-guardado { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 10px; }
.v3-guardado li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.v3-guardado .v3-selo { opacity: 1; transform: none; margin: 1px 0 0; width: 20px; height: 20px; }
.v3 .v3-guardado .v3-selo .ic { width: 12px; height: 12px; }
.v3-sair { text-align: center; margin-top: var(--s5); }
.v3-sair .btn-txt { gap: 6px; }
.v3 .v3-sair .ic { width: 18px; height: 18px; }

/* código em 8 casas (entrada) */
.v3-casas-wrap { position: relative; }
.v3-casas { display: grid; grid-template-columns: repeat(4, 1fr) 10px repeat(4, 1fr); gap: 6px; pointer-events: none; }
.v3-casas .casa { height: 60px; border-radius: var(--r-cell); background: var(--surface); border: 1.5px solid var(--rule-2); display: grid; place-items: center; font: 600 24px/1 var(--f-num); color: var(--ink);
  transition: border-color 200ms, box-shadow 200ms, background 200ms; }
.v3-casas .casa.cheia { border-color: var(--ink); }
.v3-casas .casa.nova { animation: v3-casa 300ms var(--ease-out); }
@keyframes v3-casa { from { transform: scale(.9); } to { transform: none; } }
.v3-casas .casa.atual { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--ring); }
.v3-casas .casa.atual:empty::after { content: ""; width: 2px; height: 26px; background: var(--ink); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.v3-casas.erro .casa { border-style: dashed; border-color: var(--ink); }
.v3-casas.off .casa { background: var(--paper-2); border-color: var(--rule); }
.v3-casas-wrap input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; caret-color: transparent; color: transparent; background: transparent; }
#form-acesso { gap: var(--s4); }
#form-acesso .msg-erro, #form-acesso .v3-info { margin: 0; }
.v3-rodape { text-align: center; margin-top: var(--s6); font-size: 14.5px; color: var(--ink-2); }
.v3-rodape .v3-link { margin: 0; }

@media (max-width: 340px) {
  .v3-casas { gap: 4px; grid-template-columns: repeat(4, 1fr) 6px repeat(4, 1fr); }
  .v3-casas .casa { height: 52px; font-size: 20px; }
  .v3-preco b { font-size: 25px; }
}

/* seção de assinatura nos dados da oficina */
.assinatura-bloco { margin-top: var(--s6); padding-top: var(--s2); border-top: 1px solid var(--rule); }
.assinatura-bloco .secao { margin-top: var(--s4); }
.assinatura-plano { margin: 0; font-weight: 600; }
.assinatura-plano b { font: 600 15px/1 var(--f-num); }
#of-cancelar-confirma .linha-botoes { flex-direction: column; }

/* ------------------------------------------------------------------ 2.2 oficina */
.logo-area { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.logo-caixa {
  position: relative; width: 96px; height: 96px; flex: none;
  display: grid; place-items: center; text-align: center; padding: var(--s2);
  border: 1.5px dashed var(--rule-2); border-radius: var(--r-field); background: var(--surface);
  color: var(--ink-2); font-size: 13px; line-height: 1.25; overflow: hidden;
  transition: border-color var(--t-tap) ease-out, transform var(--t-tap) ease-out;
}
.logo-caixa:active { border-color: var(--ink); transform: scale(.97); }
.logo-caixa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-caixa.enviando::after { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .4; }
.logo-botoes { display: flex; gap: var(--s1); }
.previa-cab { margin-top: var(--s5); }
.previa-cab .doc { padding: 0 14px 16px; }
.sair-bloco { margin-top: var(--s6); padding-bottom: var(--s6); text-align: center; }
.sair-confirma { background: var(--surface); border: 1.5px solid var(--rule-2); border-radius: var(--r-panel); padding: var(--s4); text-align: left; }
.sair-confirma p { margin: 0 0 var(--s3); }
.sair-confirma .linha-botoes { display: flex; gap: var(--s2); }
.sair-confirma .linha-botoes > * { flex: 1; }

/* ------------------------------------------------------------------ 2.3 lista */
.busca-faixa { position: sticky; top: 0; z-index: 5; background: var(--paper); padding-top: var(--s3); }
.busca { position: relative; }
.busca svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; z-index: 1; }
.busca .entrada { padding-left: 44px; padding-right: 48px; border-radius: var(--r-pill); font-weight: 400; }
.busca .entrada:focus { padding-left: 43.5px; }
.busca-limpar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-2);
  border-radius: var(--r-pill); font-size: 22px; line-height: 1;
}
.busca-limpar:active { background: var(--paper-2); }
.chips {
  display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s3) 0; margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink-2);
  font: 600 14px/1 var(--f-text); display: inline-flex; align-items: center; gap: 6px;
  transition: background-color var(--t-state) var(--ease-io), color var(--t-state) var(--ease-io), border-color var(--t-state) var(--ease-io), transform var(--t-tap) ease-out;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); }
.chip .n { font-family: var(--f-num); font-size: 11.5px; font-variant-numeric: tabular-nums; transition: opacity 200ms; }

.lista { list-style: none; margin: 0; padding: 0 0 calc(104px + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s3); }
.cartao {
  display: block; width: 100%; text-align: left; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-panel);
  transition: background var(--t-tap) ease-out, transform var(--t-tap) ease-out, border-color var(--t-tap) ease-out;
}
.cartao:active { background: var(--paper-2); border-color: var(--rule-2); transform: scale(.985); }
.cartao-l1 { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.cartao-carro { font: 800 16.5px/1.25 var(--f-text); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cartao-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.placa { font: 600 13px/1 var(--f-num); letter-spacing: .02em; }
.cartao-cliente { color: var(--ink-2); font-size: 14px; margin: 2px 0 8px; overflow-wrap: anywhere; }
.cartao-l3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-top: 8px; border-top: 1px dashed var(--rule); }
.meta { font: 400 11.5px/1.2 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cartao-total { font: 600 14px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao--rec .cartao-total { color: var(--ink-2); text-decoration: line-through; }
.cartao.realce { animation: realce 1s var(--ease-io) both; }
@keyframes realce { from { border-color: var(--ink); background: var(--paper-2); } to { background: var(--surface); } }
.cartao-entra { animation: cartao-entra 260ms var(--ease-out) both; }
@keyframes cartao-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cartao-sai { animation: cartao-sai 150ms var(--ease-in) both; }
@keyframes cartao-sai { to { opacity: 0; transform: scale(.94); } }

.esqueleto { height: 112px; border-radius: var(--r-panel); background: var(--paper-2); animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.vazio { text-align: center; padding: 16vh var(--s4) var(--s6); color: var(--ink-2); }
.vazio h2 { font: 800 22px/1.2 var(--f-text); letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--s2); }
.vazio p { margin: 0 auto; max-width: 30ch; }
.vazio .seta { display: block; margin: var(--s5) auto 0; width: 28px; height: 48px; color: var(--ink-2); }

.fab-faixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none;
  padding: var(--s3) 0 calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
}
.fab-faixa .btn-main { pointer-events: auto; width: min(100% - 32px, 360px); box-shadow: var(--shadow-doc); }

/* ------------------------------------------------------------------ 2.4 orçamento */
.form-orc { padding-bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); }
/* Placa / Carro / Cor: 3 colunas acima de 340px, empilham abaixo */
.tres { display: grid; gap: 0 var(--s2); }
.tres .entrada { padding-inline: 10px; }
.tres .entrada:focus, .tres .entrada[aria-invalid="true"] { padding-inline: 9.5px; }
@media (min-width: 340px) { .tres { grid-template-columns: 1.2fr 1fr .8fr; } }
.tres .campo { min-width: 0; }
.itens { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.itens-vazio { color: var(--ink-2); margin: 0 0 var(--s3); font-size: 14px; }
.item-linha {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); align-items: start;
  width: 100%; min-height: 56px; padding: var(--s3) var(--s4); text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-field);
  transition: background var(--t-tap) ease-out, transform var(--t-tap) ease-out;
}
.item-linha:active { background: var(--paper-2); transform: scale(.985); }
.tag-tipo { font: 600 10.5px/1 var(--f-num); letter-spacing: .05em; text-transform: uppercase;
            color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: var(--r-pill); padding: 4px 8px 3px; margin-top: 1px; }
.item-desc { font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.item-conta { grid-column: 2; display: flex; justify-content: space-between; gap: var(--s2); }
.item-conta .q { font: 400 12px/1.2 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.item-conta .t { font: 600 13px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.item-cresce { display: grid; animation: item-cresce 220ms var(--ease-out) both; }
.item-cresce > * { min-height: 0; overflow: hidden; }
@keyframes item-cresce { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.item-encolhe { animation: item-encolhe 150ms var(--ease-in) both; overflow: hidden; }
@keyframes item-encolhe { to { opacity: 0; transform: scaleY(.6); max-height: 0; } }

/* barra do total: redonda em cima, régua dupla, fixa no rodapé */
.bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 10;
       padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
       background: var(--surface); border-top: var(--line-total); border-radius: var(--r-bar-top); }
.bar-int { max-width: 528px; margin: 0 auto; }
.total-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: 10px; }
.subtotais { font: 400 11.5px/1.45 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.total { font: 600 22px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: var(--r-pill); padding: 4px 8px; margin-right: -8px; transition: color var(--t-state) var(--ease-io); }
.total .r { font: 400 13px/1 var(--f-text); color: var(--ink-2); margin-right: 6px; }
.total.pulso { animation: total-pulso 600ms var(--ease-io); }
@keyframes total-pulso { from { background: var(--paper-2); color: var(--ink); } to { background: transparent; } }
.total--rec .v { color: var(--ink-2); text-decoration: line-through; }
.bar .alerta { margin-bottom: 10px; }

/* ------------------------------------------------------------------ 2.6 documento */
.faixa-status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 var(--s4); color: var(--ink-2); font-size: 13.5px; }
.pill { display: inline-block; font: 600 10.5px/1 var(--f-num); letter-spacing: .05em; text-transform: uppercase;
        padding: 6px 10px 5px; border-radius: var(--r-pill);
        transition: color var(--t-state) var(--ease-io), background-color var(--t-state) var(--ease-io); }
.pill { color: var(--tag); background: var(--tag-bg); }
.pill--apr { color: var(--ink); }
.falta { color: var(--ink-2); font-size: 13.5px; margin: 0 0 var(--s4); }
.falta a, .falta button { color: var(--ink); font-weight: 600; background: none; border: 0; padding: 0 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.faixa-original { background: var(--paper-2); color: var(--ink-2); border: 1px dashed var(--rule-2); border-bottom: 0; padding: var(--s2) var(--s3); font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.folha-area { padding-bottom: calc(var(--bar-h) + 32px + env(safe-area-inset-bottom, 0px)); }

/* a folha do talão: reta, picotada, sombra dura. É o PDF, então é papel claro nos dois temas. */
.doc { position: relative; background: var(--doc); color: var(--doc-ink); border: 1px solid var(--doc-rule); border-radius: var(--r-doc);
       box-shadow: var(--shadow-doc); padding: 0 18px 22px; font-size: 12px; line-height: 1.45; }
.doc::before { content: ""; display: block; height: 12px; margin: 0 -18px 16px;
               background: radial-gradient(circle at 6px 0, var(--doc-rule) 3px, transparent 3.5px) 0 0/14px 12px repeat-x, var(--doc-perf);
               border-bottom: 1px dashed var(--doc-rule); }
.previa-cab .doc::before { margin-inline: -14px; }
.doc-folha { aspect-ratio: 210 / 297; display: flex; flex-direction: column; }
.doc-folha.esqueleto-doc::after { content: ""; display: block; height: 60%; margin: 8px; background: var(--doc-perf); animation: pulso 1.4s ease-in-out infinite; }
.doc-folha.bate { animation: batida 360ms ease-out; }
@keyframes batida { 0%, 62% { transform: none; } 78% { transform: translateY(2px); } 100% { transform: none; } }
.doc-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--doc-rule); }
.doc-logo { max-height: 56px; max-width: 40%; object-fit: contain; }
.doc-oficina { text-align: right; margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
.doc-oficina strong { display: block; font: 800 14px/1.2 var(--f-text); letter-spacing: -.005em; }
.doc-oficina span { display: block; color: var(--doc-ink-2); }
.doc-oficina .vazio-nome { font-style: italic; color: var(--doc-ink-2); font-weight: 600; }
.doc-titulo-caixa { position: relative; overflow: hidden; margin: 16px 0 2px; }
.doc-title { font: 800 22px/1.1 var(--f-text); letter-spacing: .04em; text-align: center; margin: 0; }
.doc-num { font: 600 10.5px/1.4 var(--f-num); text-align: center; color: var(--doc-ink-2); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.doc-num b { color: var(--doc-stamp); font-weight: 600; }
.troca-sai { animation: troca-sai 150ms var(--ease-in) both; }
.troca-entra { animation: troca-entra 300ms ease-in-out both; }
@keyframes troca-sai { to { opacity: 0; transform: translateY(-6px); } }
@keyframes troca-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.doc-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 479px) { .doc-blocos { grid-template-columns: 1fr; gap: 12px; } }
.doc-bloco h3 { font: 600 9.5px/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--doc-ink-2); margin: 0 0 4px; }
.doc-bloco p { margin: 0; overflow-wrap: anywhere; }
.doc-bloco .doc-placa { font: 600 11.5px/1.4 var(--f-num); letter-spacing: .02em; }
.doc-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-tabela th { background: var(--doc-perf); font: 600 10.5px/1.2 var(--f-text); text-align: left; padding: 6px 5px; color: var(--doc-ink-2); }
.doc-tabela td { padding: 6px 5px; border-bottom: 1px dotted var(--doc-rule); vertical-align: top; overflow-wrap: anywhere; }
.doc-tabela .num { text-align: right; white-space: nowrap; font-family: var(--f-num); font-size: 10.5px; color: var(--doc-ink); }
.doc-tabela .meta-estreito { display: none; }
@media (max-width: 479px) {
  .doc-tabela thead { display: none; }
  .doc-tabela tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px dotted var(--doc-rule); }
  .doc-tabela td { border: 0; padding: 0; }
  .doc-tabela .c-tipo, .doc-tabela .c-qtd, .doc-tabela .c-valor { display: none; }
  .doc-tabela .c-desc { grid-column: 1 / -1; }
  .doc-tabela .meta-estreito { display: block; color: var(--doc-ink-2); font-family: var(--f-num); font-size: 10px; }
  .doc-tabela .c-total { align-self: end; }
}
.doc-somas { margin: 10px 0 0 auto; width: min(100%, 240px); }
.doc-somas div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.doc-somas .v { font-family: var(--f-num); font-size: 10.5px; white-space: nowrap; }
.doc-somas .doc-total { border-top: 3px double var(--doc-ink); margin-top: 4px; padding-top: 6px; font-weight: 800; font-size: 13px; }
.doc-somas .doc-total .v { font-size: 12.5px; font-weight: 600; }
.doc-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.doc-assinaturas div { border-top: 1px solid var(--doc-ink-2); padding-top: 4px; text-align: center; color: var(--doc-ink-2); font-size: 11px; }
.doc-nota { margin-top: auto; padding-top: 18px; font-size: 9px; color: var(--doc-ink-2); text-align: center; }

/* o carimbo: reto, carmim, o único movimento grande */
.carimbo { display: block; width: max-content; margin: -6px 6px 16px auto; position: relative; z-index: 2; color: var(--doc-stamp);
           border: 3px solid currentColor; border-radius: var(--r-stamp); padding: 5px 10px 4px;
           font: 600 16px/1 var(--f-num); letter-spacing: .06em; pointer-events: none;
           opacity: .9; transform: rotate(-9deg); mix-blend-mode: multiply; }
.carimbo.cai { animation: carimbo 320ms var(--ease-stamp) both; }
@keyframes carimbo { from { opacity: 0; transform: rotate(-9deg) scale(1.6); } to { opacity: .9; transform: rotate(-9deg) scale(1); } }

/* faixa "Conversa com João": pauta em vez do fundo do WhatsApp */
.conv { display: flex; flex-direction: column; gap: 14px; margin-top: var(--s6); padding: 16px 14px 20px;
        background: repeating-linear-gradient(to bottom, transparent 0 23px, var(--pauta) 23px 24px), var(--conv-bg);
        border: 1px solid var(--rule); border-radius: var(--r-panel); }
.conv-lbl { margin: 0; font: 600 10.5px/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.conv-vazio { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.bb { position: relative; align-self: flex-end; max-width: 86%; padding: 9px 13px 7px; border: 1px solid var(--bubble-out-line);
      background: var(--bubble-out); border-radius: var(--r-bubble); border-bottom-right-radius: var(--r-bubble-tail);
      box-shadow: 2px 2px 0 var(--rule); font-size: 14.5px; line-height: 1.35; }
.bb-mini { display: flex; gap: 10px; align-items: center; }
.bb-mini b { display: block; font-size: 13.5px; font-weight: 600; }
.bb-mini small { display: block; font: 400 10.5px/1.3 var(--f-num); color: var(--ink-2); }
.miniatura { flex: none; position: relative; width: 32px; height: 40px; border: 1px solid var(--doc-rule);
             background: radial-gradient(circle at 3px 0, var(--doc-rule) 1.6px, transparent 2px) 0 0/7px 6px repeat-x,
                         repeating-linear-gradient(to bottom, transparent 0 7px, var(--doc-rule) 7px 8px) 0 10px/100% 22px no-repeat, var(--doc); }
.miniatura::after { content: attr(data-n); position: absolute; left: 3px; bottom: 2px; font: 600 7.5px/1 var(--f-num); color: var(--doc-stamp); }
.bb-meta { display: flex; justify-content: flex-end; gap: 6px; font: 400 10px/1 var(--f-num); color: var(--ink-2); margin-top: 6px; }
.tk { color: var(--flare-text); font-weight: 600; letter-spacing: -.18em; margin-right: .18em; }
.conv-espera { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); align-self: flex-end; text-align: right; max-width: 30ch; }
.conv-sys { align-self: center; font: 600 10.5px/1 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
            border: 1px dashed var(--rule-2); background: var(--surface); padding: 7px 12px 6px; border-radius: var(--r-pill); }
.conv-sys b { color: var(--stamp); font-weight: 600; }
.sobe { animation: sobe 320ms var(--ease-out) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bar-acoes { display: grid; gap: var(--s2); }
.bar-acoes .total-linha { margin-bottom: 0; }
.bar-acoes .par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.bar-acoes .par--resposta { grid-template-columns: auto 1fr; }
.bar-acoes .par--resposta .btn-cont { min-height: var(--tap-btn); padding-inline: 18px; }
.bar-acoes .textos { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--s1); }

/* ------------------------------------------------------------------ sheets: sobem do rodapé */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity 250ms ease-out; }
.scrim.aberto { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0 auto; max-width: 560px;
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet);
  padding: 10px var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 200ms var(--ease-in);
}
.sheet::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: var(--r-pill); background: var(--rule-2); }
.sheet.aberto { transform: none; transition: transform 260ms var(--ease-sheet); }
.sheet h2 { font: 800 19px/1.25 var(--f-text); letter-spacing: -.01em; margin: 0 0 var(--s3); }
.sheet p { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 15px; }
.sheet .pilha { display: grid; gap: var(--s2); margin-top: var(--s4); }
.sheet .pilha .btn-txt { justify-self: center; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); margin-bottom: var(--s4); }
.segmento button { min-height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-weight: 600; transition: background-color var(--t-state) var(--ease-io), color var(--t-state) var(--ease-io); }
.segmento button[aria-pressed="true"] { background: var(--solid); color: var(--solid-ink); }
.qtd-valor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s3); }
.passo { display: flex; align-items: stretch; }
.passo .entrada { text-align: center; border-radius: 0; min-width: 0; padding-inline: 4px; }
.passo .entrada:focus { padding-inline: 3.5px; }
.passo button { flex: none; width: 44px; border: 1.5px solid var(--rule-2); background: var(--paper-2); font-size: 20px; font-weight: 600; transition: background var(--t-tap) ease-out; }
.passo button:active { background: var(--rule); }
.passo button:first-child { border-radius: var(--r-field) 0 0 var(--r-field); border-right: 0; }
.passo button:last-child { border-radius: 0 var(--r-field) var(--r-field) 0; border-left: 0; }
.prefixo { position: relative; }
.prefixo span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 15px; pointer-events: none; }
.prefixo .entrada { padding-left: 40px; text-align: right; font-family: var(--f-num); }
.subtotal-item { font: 600 13px/1 var(--f-num); text-align: right; margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }
.adicionado { background: var(--paper-2); color: var(--ink); padding: 8px 12px; border-radius: var(--r-pill); font-size: 14px; margin: 0 0 var(--s3); animation: cartao-entra 220ms var(--ease-out) both; }
.passos { margin: 0 0 var(--s4); padding-left: 22px; }
.passos li { margin-bottom: var(--s2); }

/* ------------------------------------------------------------------ toast */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; justify-items: center; gap: var(--s2); padding: 0 var(--gutter); pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 528px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--toast); color: var(--toast-ink); border-radius: var(--r-toast); padding: 12px 16px; box-shadow: var(--shadow-doc);
  font-size: 15px; font-weight: 600; animation: toast-entra 260ms var(--ease-out) both;
}
/* toast de erro: o mesmo sinal do componente de erro, sobre a tinta */
.toast--erro::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--flare); color: var(--flare-ink); font: 600 13px/1 var(--f-num);
}
.toast--erro > span { flex: 1; }
.toast.sai { animation: toast-sai 160ms var(--ease-in) both; }
.toast button { flex: none; background: transparent; border: 0; color: inherit; font-weight: 600; text-decoration: underline; min-height: 44px; padding: 0 var(--s2); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(8px); } }

/* Movimento reduzido: tudo desligado, o estado final aparece direto (carimbo já assentado). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .carimbo { opacity: .9; transform: rotate(-9deg); }
}