/* ============ TEMAS (tokens) ============ */
[data-theme="nord"] {
  --canvas:#222834; --surface:#2a313f; --surface-2:#2f3747; --border:#3b4252;
  --text:#d8dee9; --text-emph:#eceff4; --muted:#94a0b4;
  --accent:#88c0d0; --accent-2:#5e81ac; --on-accent:#1b2531;
  --danger:#bf616a; --success:#a3be8c; --warning:#ebcb8b; --info:#cda3d4;
}
[data-theme="amber"] {
  --canvas:#0f0d0a; --surface:#181410; --surface-2:#211b13; --border:#2d2619;
  --text:#e4ddd0; --text-emph:#ffffff; --muted:#9d927e;
  --accent:#f0a830; --accent-2:#c47b22; --on-accent:#231905;
  --danger:#e2554a; --success:#6ee7b7; --warning:#f0c060; --info:#c9a0dc;
}

/* ============ AJUDA (tokens) ============ */
/* A ajuda tem COR PRÓPRIA — o laranja da calculadora pública — nos DOIS temas. No Nord ele contrasta
   com o frost (ação é gelo, ajuda é calor); no Forged Amber ele harmoniza com o âmbar do tema, e o
   que diferencia ajuda de ação passa a ser a FORMA (circulado, tracejado, borda lateral).

   REGRA SEMÂNTICA: --help marca ESTRUTURA de ajuda — o "?", o tracejado, a borda da nota, os links
   de ajuda. NUNCA botão de ação, status, KPI ou dado: é cor de aprender, não de fazer. Texto corrido
   continua em --muted/--text (contraste), e o accent de cada tema segue sendo a cor da AÇÃO. */
[data-theme="nord"], [data-theme="amber"] {
  --help: #f1880d;
  --help-soft: color-mix(in srgb, var(--help) 12%, transparent);
  --help-border: color-mix(in srgb, var(--help) 38%, transparent);
}

:root {
  --mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Gutter do .content (o scroller). Fonte única: toda faixa sticky de largura total compensa ESTE valor com
     top/margem negativos — sticky respeita o padding do scroller e, sem compensar, o conteúdo passa na fresta
     acima dela (#288). 7px no telefone (bloco ≤640px). */
  --content-pad: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}
.muted { color: var(--muted); }
.num { font-family: var(--mono); }
code { font-family: var(--mono); color: var(--accent); }
h1 { font-size: 20px; color: var(--text-emph); margin: 0 0 4px; }
a { color: inherit; }

/* ============ LAYOUT ============ */
/* O fundo geral vem daqui (não do body): o data-theme vive no .app, então o --canvas segue o tema
   selecionado. O <html> tem data-theme fixo "nord", então o body ficaria sempre no canvas Nord. */
.app { display: flex; height: 100vh; overflow: hidden; background: var(--canvas); }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Fundo pegboard (a "bancada do maker"): furinhos em CSS puro só na área de CONTEÚDO — o topo e a sidebar
   ficam limpos (antes ficava no .app e vazava atrás dos botões do topo/ghost). Duas camadas de radial-gradient
   num grid de 24px: o furo (sombra escura, p/ cima) + o lábio/rim claro (token --border, p/ baixo) = bevel.
   background-attachment padrão (scroll): o padrão fica fixo enquanto o conteúdo rola. */
.content {
  flex: 1; overflow: auto; padding: var(--content-pad);
  background-image:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--border) 55%, transparent) 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, .28) 0 1.8px, transparent 2.4px);
  background-size: 24px 24px;
}

/* ============ SCROLLBARS NO TEMA ============ */
/* Barras discretas e no tema (Nord/Amber) em TODA área rolável — sidebar (.navwrap), conteúdo, drawers,
   diálogos, tabelas, textareas. Polegar em tom de --muted (translúcido) que clareia no hover; trilho
   transparente (mostra o fundo do container). Cobre WebKit/Blink (::-webkit-scrollbar) e o padrão. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ============ TOP BAR ============ */
.top { height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; gap: 14px; flex-shrink: 0;
  /* Container da barra (#288): as ações do editor encolhem pela largura DA BARRA, não da janela (sidebar mini/cheia
     e o painel da Viabilidade mudam a conta). inline-size não aplica layout containment: os position:fixed de
     dentro (scrim do + Adicionar) seguem presos à viewport. */
  container-type: inline-size; container-name: topo; }
.top h1 { font-size: 16px; font-weight: 700; color: var(--text-emph); margin: 0; white-space: nowrap; }
.top .crumb { color: var(--muted); font-size: 12px; white-space: nowrap; }
.top .sp { flex: 1; }

/* Barra única dos editores em modo página (#288, variante A): o EditorShell Sobreposto=false entrega título, selo e
   ações a este slot (SectionContent "topo-editor"). Com ele preenchido a barra é DO EDITOR: o título genérico, a
   migalha e o "+ Novo" da página saem. Nunca quebra linha — encolhe por prioridade (ver EDITOR SHELL). */
.topo-editor { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.topo-editor:not(:has(> *)) { display: none; }
.top:has(.topo-editor > *) > h1,
.top:has(.topo-editor > *) > .crumb,
.top:has(.topo-editor > *) > .sp,
.top:has(.topo-editor > *) > .top-acao { display: none; }
.topo-editor .cod { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: 15px; flex: none; }
.topo-editor h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topo-editor .te-selo { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.topo-editor .te-selo:empty { display: none; }
.topo-editor .sp { flex: 1; }
.topo-editor .te-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.topo-editor .te-acoes .btn { white-space: nowrap; }
/* "+ Adicionar" vira "+" quando a barra aperta. */
@container topo (max-width: 1060px) { .addmenu .rot { display: none; } }
.search { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); width: 200px; font-size: 13px; }
.search::placeholder { color: var(--muted); }
.btn { background: var(--accent); color: var(--on-accent); border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* ============ SIDEBAR ============ */
.side {
  width: 210px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 10px; flex-shrink: 0;
  overflow-y: auto; min-height: 0;
}
.side > * { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.logo {
  width: 34px; height: 34px; border-radius: 9px;  
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent); font-weight: 800; font-family: var(--mono); font-size: 18px;
}
.brand .nm { font-weight: 800; color: var(--text-emph); font-size: 16px; }
.brand .tg { font-size: 10px; color: var(--muted); }
.navgrp {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.nav {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--text); cursor: pointer; font-size: 13.5px; font-weight: 500;
  text-decoration: none;
}
.nav .ic { width: 18px; text-align: center; opacity: .8; }
.nav:hover { background: var(--surface-2); }
.nav.active {
  background: var(--surface-2); color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent); font-weight: 600;
}
.nav .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 6px; }
.side .foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 8px; text-decoration: none; border-radius: 8px; }
.userchip:hover { background: var(--surface-2); }
.uava {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent); font-weight: 800; font-family: var(--mono); font-size: 14px; flex-shrink: 0;
}
.uinfo { line-height: 1.2; min-width: 0; }
.uinfo .un { font-weight: 700; color: var(--text-emph); font-size: 13px; }
.uinfo .ur { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .ic { margin-left: auto; }

/* Sou Maker: CHIP de ação com identidade própria (spec 6, Etapa B) — não se confunde com o perfil.
   Tokens dos dois temas (usa as variáveis de tema, então Nord/Amber saem de graça). */
.soumaker {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text-emph); text-decoration: none; cursor: pointer; position: relative;
}
.soumaker:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }
.soumaker.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.soumaker .smic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.soumaker .smt { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.soumaker .smd { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.footdiv { height: 1px; background: var(--border); margin: 10px 2px; }

/* ============ Canal de WhatsApp comercial (#270 — BotaoWhatsApp) ============
   Verde do WhatsApp nos DOIS temas (é a cor da marca deles, não ação nossa). Mora aqui porque o app.css é
   carregado em TODA página pelo App.razor — inclusive a calculadora e o Raio-X públicos, que herdam os tokens
   do data-theme="nord" do <html>. As folhas públicas (calculadora-publica.css, raio-x.css) só repõem a cor,
   porque o ".calcpub a"/".raiox a" delas é mais específico que estas regras. */
:root { --wa: #25d366; --wa-soft: rgba(37, 211, 102, .10); --wa-border: rgba(37, 211, 102, .38); }
.wa-ico { width: 15px; height: 15px; flex: none; fill: var(--wa); }
.wa-linha {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; color: var(--muted);
}
.wa-linha .txt { flex: 1 1 160px; min-width: 0; }
.wa-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid var(--wa-border); background: var(--wa-soft); color: #d9fbe6;
  border-radius: 8px; font-weight: 600; font-size: 12px; padding: 6px 11px;
  text-decoration: none; white-space: nowrap;
}
.wa-btn:hover { border-color: var(--wa); color: #fff; }
.wa-btn:focus-visible, .wa-link:focus-visible { outline: 2px solid var(--wa); outline-offset: 2px; }
.wa-link {
  display: inline-flex; align-items: center; gap: 5px; color: #9ee6b9; font-weight: 600; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.wa-link:hover { color: #d9fbe6; }
.wa-link .wa-ico { width: 14px; height: 14px; }
/* Fim de um verbete de ajuda (AjudaLonga com OrigemWhatsApp): separador tracejado antes do link. */
.wa-sep { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 10px; }
/* Rodapé do menu: item .nav com o ícone verde; recolhido, o .lbl some e o flyout diz o resto. */
.side .wa-nav { margin-top: 6px; font-size: 12px; padding: 7px 10px; color: var(--muted); }
.side .wa-nav:hover { color: var(--text-emph); }
.side .wa-nav .ic { opacity: 1; display: flex; align-items: center; justify-content: center; }
/* Índice do /ajuda: a linha discreta logo abaixo do lead. */
.mnl-wa { font-size: 13px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Botão FLUTUANTE das páginas públicas (#270, 05/10): pílula no canto; no celular, círculo só com o ícone. Verde do
   WhatsApp com texto e glifo ESCUROS (o guia de marca deles permite o glifo em preto) — texto branco sobre #25d366 não
   passa de 2:1 de contraste. A folga no fim da página garante que ele nunca cubra o preço nem o CTA. */
.wa-flutuante {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border-radius: 999px;
  background: var(--wa); color: #0b2e17; font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.wa-flutuante .wa-ico { width: 22px; height: 22px; fill: #0b2e17; }
.wa-flutuante:hover { filter: brightness(1.06); }
.wa-flutuante:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body:has(.wa-flutuante) { padding-bottom: 80px; }
@media (max-width: 640px) {
  .wa-flutuante { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa-flutuante .wa-ico { width: 28px; height: 28px; }
}
@media print { .wa-flutuante { display: none; } }
.footrow { display: flex; gap: 6px; margin-top: 4px; }
.footrow .nav { flex: 1; justify-content: center; font-size: 12px; padding: 7px 6px; }

/* ============ KPI CARDS ============ */
.grid { display: grid; gap: 14px; }
.kpicards { grid-template-columns: repeat(5, 1fr); margin-bottom: 20px; }
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.kpi, .card-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.kpi .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi .v { font-family: var(--mono); font-size: 25px; font-weight: 700; color: var(--text-emph); margin-top: 6px; }
.kpi .d { font-size: 11px; margin-top: 4px; }
.up { color: var(--success); } .down { color: var(--danger); } .neu { color: var(--muted); }
.kpi.alert .v { color: var(--danger); } .kpi.warn .v { color: var(--warning); }
.kpi.clk { cursor: pointer; } .kpi.clk:hover { border-color: var(--accent); }

/* dashboard: herói do lucro + esteira do funil */
.hero { border-left: 3px solid var(--success); margin-bottom: 14px; }
.hero.clk { cursor: pointer; } .hero.clk:hover { border-color: var(--accent); }
.hero .hl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.hero .hv { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1.1; margin: 4px 0; }
.hero .hv.pos { color: var(--success); } .hero .hv.neg { color: var(--danger); }
.hero .hsub { font-size: 13px; color: var(--text); }
.hero .hcompose { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: var(--mono); }
.esteira { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esteira .et { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; flex: 1; min-width: 110px; }
.esteira .et.clk { cursor: pointer; } .esteira .et.clk:hover { border-color: var(--accent); }
.esteira .etv { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text-emph); }
.esteira .etl { font-size: 11px; color: var(--muted); margin-top: 2px; }
.esteira .etar { color: var(--muted); font-size: 16px; }

/* evolução: receita + lucro por mês, mesma régua, ambos rotulados e com valor */
.evorow { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.evomes { color: var(--muted); font-size: 12px; font-weight: 600; }
.evobars { display: flex; flex-direction: column; gap: 6px; }
.evobar { display: grid; grid-template-columns: 58px 1fr 92px; gap: 8px; align-items: center; }
.evolbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.evoval { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--text-emph); }

/* agenda: dias e itens */
.agdia { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.agdia:last-child { border-bottom: none; }
.agdia.hoje { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; }
.agdata { font-size: 13px; color: var(--muted); padding-top: 2px; }
.agitens { display: flex; flex-direction: column; gap: 5px; }
.agitem { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.agitem .link { background: none; border: none; padding: 0; font-size: 13px; }

/* especificações da OP (produção): destaque do que o cliente pediu */
.opspecs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 2px; }
.opspec { font-size: 12px; color: var(--muted); } .opspec .k { text-transform: none; }
.opspec b { color: var(--text-emph); font-size: 13px; }
.specbox { background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.specbig { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); }
.specbig:last-child { border-bottom: none; }
.specbig .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.specbig .v { font-size: 20px; font-weight: 700; color: var(--text-emph); }

/* ficha de produção imprimível (uma página por OP) */
.ficha { max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; }
.ficha .fh { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--text-emph); padding-bottom: 8px; }
.ficha .fcod { font-size: 26px; font-weight: 800; color: var(--text-emph); }
.ficha .fqtd { font-size: 18px; font-weight: 700; }
.ficha .fprod { font-size: 22px; font-weight: 600; margin: 12px 0 6px; color: var(--text-emph); }
.ficha .fmeta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.ficha .fsec { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 18px 0 8px; }
.ficha .fspecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ficha .fspec { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.ficha .fspec .fk { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ficha .fspec .fv { font-size: 24px; font-weight: 800; color: var(--text-emph); }
.ficha .frow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ficha .ffoot { margin-top: 22px; font-size: 11px; color: var(--muted); text-align: center; }

@media print {
    .side, .top, .toasts, .ficha-noprint, .scrim, .drawer, .dialog,
    .tour-scrim, .tour-spot, .tour-balloon,
    .rc-faixa, .rc-scrim, .rc-card { display: none !important; }
    .app, .main, .content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
    body, .app { background: #fff !important; }
    .ficha { border: none; border-radius: 0; max-width: 100%; background: #fff; padding: 0; }
    .ficha .fcod, .ficha .fprod, .ficha .fspec .fv, .ficha .fqtd, .ficha .frow b { color: #000 !important; }
    .ficha .fh { border-bottom-color: #000; }
    .ficha .fspec { border-color: #999; }
}

/* ============ PANEL ============ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.panel h3 { font-size: 13px; color: var(--text-emph); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.panel h3 .tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; }
.twocol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }

/* ============ TABLE ============ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; }
td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); }
tr:last-child td { border-bottom: none; }
tr.clk { cursor: pointer; }
tr.clk:hover td { background: var(--surface-2); }
.r { text-align: right; } .c { text-align: center; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable .car { color: var(--accent); margin-left: 3px; }

/* Comparação "Venda em canal" (Calculadora + editor de produto): todos os canais abertos e alinhados
   para comparar de relance. Padding enxuto porque vive na coluna estreita do resumo (~430px). */
.canaissim td, .canaissim th { padding: 8px 6px; vertical-align: top; }
.canaissim td:first-child, .canaissim th:first-child { padding-left: 2px; }
.canaissim td:last-child, .canaissim th:last-child { padding-right: 2px; }
.canaissim .cn { font-weight: 600; color: var(--text-emph); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.canaissim .cn .pill { font-size: 10px; padding: 1px 7px; }
.canaissim .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.canaissim .v { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--text-emph); white-space: nowrap; }
.canaissim .mg { font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.canaissim tr.best td { background: color-mix(in srgb, var(--success) 7%, transparent); }
/* #294 — duas leituras de canal na Calculadora ("Quanto cobrar" × "No seu preço"). */
.canaissim.cobrar th { white-space: nowrap; }
.canal-abas { display: flex; gap: 4px; margin: 2px 0 10px; }
.canal-abas button { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.canal-abas button.on { color: var(--text-emph); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); font-weight: 600; }

/* ============ LISTAS (busca + filtros + paginação) ============ */
.listbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.listbar .search { width: 240px; }
.listbar select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.pager .btn { padding: 4px 12px; font-size: 15px; line-height: 1; }
.pager .btn:disabled { opacity: .4; cursor: default; }
.pager select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; color: var(--text); font-size: 12.5px; font-family: var(--sans); }

/* ============ PILLS ============ */
.pill { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; display: inline-block; }
.pill.ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.pill.dg { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.pill.wn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.pill.ac { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pill.mut { background: var(--surface-2); color: var(--muted); }
.pill.ig { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }

/* ============ KANBAN ============ */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.col { width: 280px; flex-shrink: 0; scroll-snap-align: start; border-radius: 11px; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: -3px; }
.col.dragover, .col-strip.dragover { background: color-mix(in srgb, var(--accent) 10%, transparent); outline-color: var(--accent); }
.colhead { display: flex; align-items: center; gap: 8px; padding: 6px 4px 10px; background: var(--canvas); }
.col-toggle { margin-left: 6px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; width: 20px; height: 20px; line-height: 1; font-size: 15px; padding: 0; }
.col-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* coluna retraída: tira fina, alvo de drop, clique expande */
.col-strip { width: 42px; flex-shrink: 0; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: -3px; }
.col-strip:hover { border-color: var(--accent); }
.col-strip .strip-ct { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.col-strip .strip-nm { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 12px; color: var(--text-emph); white-space: nowrap; }
.card[draggable="true"] { cursor: grab; }
.card.done { opacity: .7; }
.card.faded { opacity: .55; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.colhead .nm { font-weight: 700; color: var(--text-emph); font-size: 13px; }
.colhead .ct { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; margin-left: auto; }
.cards { display: flex; flex-direction: column; gap: 9px; }
.board-mais { background: none; border: 1px dashed var(--border); color: var(--muted); border-radius: 10px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; }
.board-mais:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Pós-venda: fila de contatos ---------------------------------------------------------------- */
.pv-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
.pv-card.atrasada { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.pv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-vence { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pv-vence.dg { color: var(--danger); font-weight: 700; }
.pv-aval { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text); margin-bottom: 8px; }
.pv-aval b { color: #f5b301; letter-spacing: 1px; }
.pv-aval .pv-coment { color: var(--muted); font-style: italic; }
.pv-texto { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font: inherit;
  font-size: 13px; resize: vertical; background: var(--surface-2); color: var(--text); }
.pv-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pv-stars { display: inline-flex; align-items: center; gap: 3px; font-size: 24px; color: #dfe3ea; line-height: 1; }
.pv-stars span { cursor: pointer; }
.pv-stars span.on { color: #f5b301; }
.pv-stars .pv-star-clear { font-size: 11px; color: var(--muted); margin-left: 8px; text-decoration: underline; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px; cursor: pointer; }
.card:hover { border-color: var(--accent); }
.card .r1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.card .pid { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.card .val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-emph); }
.card .cli { font-weight: 600; color: var(--text-emph); font-size: 13.5px; }
.card .desc { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.card .foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.prazo { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.prazo.late { color: var(--danger); font-weight: 700; } .prazo.near { color: var(--warning); }

.bar { height: 7px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; border-radius: 5px; }
.progress { display: flex; align-items: center; gap: 8px; }
.progress .pnum { font-size: 11px; color: var(--muted); width: 60px; text-align: right; font-family: var(--mono); }

/* ============ DRAWER ============ */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; width: 540px; max-width: 92vw; height: 100%; background: var(--canvas); border-left: 1px solid var(--border); z-index: 50; overflow-y: auto; padding: 22px; box-shadow: -8px 0 30px rgba(0,0,0,.3); }
.drawer .x { position: absolute; top: 16px; right: 18px; cursor: pointer; color: var(--muted); font-size: 20px; background: none; border: none; }
/* OP cancelada: faixa no topo + gaveta esmaecida (só leitura). Faixa, ✕, Imprimir ficha e rodapé ficam em cor plena;
   sem pointer-events:none — os links (Pedido #) seguem clicáveis. O balão do HelpTip vive no top layer, então o filter não o prende. */
.faixa-cancelada { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-left: 3px solid var(--danger); border-radius: 8px; padding: 10px 12px; margin: 10px 0 4px; }
.faixa-cancelada .fc-t { color: var(--danger); font-weight: 700; font-size: 13px; }
.faixa-cancelada .fc-s { color: var(--text); font-size: 12px; margin-top: 3px; }
.drawer.cancelada > :not(.faixa-cancelada):not(.x):not(.dh):not(.dsub):not(.btn-ficha):not(.dfoot) { opacity: .6; filter: saturate(.3); }
.dh { font-size: 18px; font-weight: 700; color: var(--text-emph); }
.dsub { color: var(--muted); font-size: 13px; margin-top: 2px; margin-bottom: 18px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.kv .box { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px; }
.kv .l { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kv .v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text-emph); margin-top: 3px; }
.sech { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.specrow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.specrow .k { color: var(--muted); }
.link { color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.note { font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }

/* ============ FORMS ============ */

/* PISO de estilo: todo input/select/textarea nasce no tema, mesmo sem wrapper. Sem isto, um controle
   que não caísse em .field/.bomrow/.orc-fil/.search renderizava com o default do browser (fundo branco,
   Arial, borda nativa) no meio de campos estilizados.

   O `:where()` contribui especificidade ZERO, então o seletor inteiro vale (0,0,1) e NUNCA vence
   `.field input` (0,1,1), `.bomrow input`, `.orc-fil input`, `.search` ou `.pager select` — as regras de
   contexto seguem mandando, independente da ordem no arquivo. É por isso que este piso é seguro.

   Sem `width`: largura é decisão do contexto (o .field é quem estica para 100%). Fora da lista os tipos
   que ficariam ruins com padding/fundo: checkbox, radio, file, range e color renderizam nativos. */
input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])),
select, textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: 13px; font-family: var(--sans);
}
input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])):focus,
select:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* Checkbox/radio nunca herdam largura/padding de linha compacta (.bomrow input estica o quadradinho). */
label.check input[type=checkbox], label.check input[type=radio],
.bomrow input[type=checkbox], .bomrow input[type=radio],
.bomvar input[type=checkbox], .bomvar input[type=radio] { width: auto; padding: 0; }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
/* Vale solto também: `label.check` aparece fora de .field (linhas .bomvar do painel de ficha e do de
   tempos), onde antes ficava sem flex/gap e com o tamanho errado. */
label.check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--text); cursor: pointer; }
.field > label.check { margin-bottom: 0; }
.field > label.check input { width: auto; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts { display: flex; gap: 8px; }
.opt { flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 10px; cursor: pointer; background: var(--surface); }
.opt .ot { font-weight: 600; color: var(--text-emph); font-size: 13px; }
.opt .od { font-size: 11px; color: var(--muted); margin-top: 2px; }
.opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.sel .ot { color: var(--accent); }
/* saldo ao vivo dentro do card (atendimento do item) + pill "sugerido" do card que a regra apontaria */
.opt { position: relative; }
.opt .saldo { font-size: 11px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 5px; }
.opt .saldo.ok { color: var(--success); }
.opt .saldo.wn { color: var(--warning); }
.opt .sug { position: absolute; top: -8px; right: 8px; font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 18%, var(--canvas)); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); padding: 1px 7px; border-radius: 12px; font-weight: 700; }
.hide { display: none !important; }

/* picker (campo de busca com lupa) */
.picker { position: relative; display: flex; gap: 6px; }
.picker > input { flex: 1; }
.pk-lupa { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; color: var(--text); cursor: pointer; font-size: 14px; }
.pk-lupa:hover { border-color: var(--accent); }
.pk-add { color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1; }
.criar-row td { border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; }
/* z-index 35: dentro do EditorShell o cabeçalho sticky está em 30 — com o valor antigo (5) o dropdown de um
   Picker perto do topo passava POR BAIXO do cabeçalho. Não colide com nada: quando o modal da lupa abre, o
   próprio Picker fecha o dropdown. */
.pk-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 35; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pk-opt { padding: 8px 11px; cursor: pointer; font-size: 13px; color: var(--text); }
.pk-opt:hover { background: var(--surface-2); }
.pk-opt.criar { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); }
/* Linha INFORMATIVA do dropdown ("nada encontrado" / "nenhuma X cadastrada") não é opção: sem mãozinha e sem
   hover. ⚠ A cor tem de vir DAQUI: o markup antigo usava `class="pk-opt muted"`, e `.muted` (linha 42) perde
   para `.pk-opt` (mesma especificidade, declarada depois) — o texto saía branco, com cursor de mão e hover,
   idêntico a uma opção clicável. Era metade do "não consigo selecionar" que o maker reportava. */
.pk-opt.pk-nada { cursor: default; color: var(--muted); }
.pk-opt.pk-nada:hover { background: transparent; }
/* Vazio que É uma resposta (ex.: "Venda direta — sem campanha"): continua sendo placeholder — o input segue
   sem valor e a busca nunca vê essa string —, mas legível como o <option> vazio do <select> ao lado. */
/* #294 — a cor do filamento (CorBolinha) no campo e na lista do Picker. Contorno duplo: claro por dentro, escuro por
   fora — o preto aparece no tema escuro e o branco no claro, sem cor nova no :root. */
.cor-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.35); }
.cor-sw-vazio { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; vertical-align: -2px; }
.pk-opt > .cor-sw, .pk-opt > .cor-sw-vazio, td > .cor-sw, td > .cor-sw-vazio { margin-right: 8px; }
.picker.pk-com-prefixo > .cor-sw { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.picker.pk-com-prefixo > input { padding-left: 32px; }
.picker > input.pk-vazio::placeholder { color: color-mix(in srgb, var(--text) 75%, var(--muted)); opacity: 1; }

.dfoot { display: flex; gap: 10px; margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.dfoot .btn { flex: 1; text-align: center; }

/* mini-form de criação inline (Picker → cria e seleciona sem sair do drawer) */
.inline-novo { background: var(--surface); border: 1px dashed var(--accent); border-radius: 9px; padding: 11px; margin-top: 8px; }
.inline-novo .ttl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 8px; }
/* Dropzone do import de arquivo fatiado (ImportFatiado): o padrão de arrastar-e-soltar do /raio-x público na
   variante compacta — vive dentro de painéis e diálogos. O <input> nativo fica invisível mas presente (é dele que
   o JS lê os bytes); a área inteira é o alvo do clique, do teclado e do drop. */
.dropzone { position: relative; border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); padding: 14px 12px; text-align: center; cursor: pointer; outline: none; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.sobre { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.dropzone.lendo { cursor: progress; opacity: .75; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.dropzone .dz-t { font-size: 13px; font-weight: 600; color: var(--text-emph); }
.dropzone .dz-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.dropzone .dz-erro { font-size: 12px; color: var(--danger); margin-top: 6px; }

/* ============ TOAST ============ */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; padding: 11px 13px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: toastin .18s ease-out; }
.toast .tmsg { font-size: 13px; color: var(--text); flex: 1; }
.toast-act { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: none; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--sans); }
.toast-act:hover { filter: brightness(1.1); }
.toast-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ DIALOGO (modal central de fluxo) ============ */
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 55; width: 440px; max-width: 92vw; background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.dialog .dg-title { font-size: 16px; font-weight: 700; color: var(--text-emph); margin-bottom: 8px; }
.dialog .dg-body { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-bottom: 18px; }
.dialog .dg-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ============ RECONEXÃO DO CIRCUITO ============ */
/* Marcação em Components/Shared/ReconnectUi.razor; cliques em wwwroot/js/reconexao.js.
   TUDO nasce escondido: só as classes que o Blazor liga em #components-reconnect-modal
   (components-reconnect-show/retrying/paused/failed/rejected) revelam cada bloco.
   Fica dentro do .app → herda os tokens do tema escolhido (Nord/Amber). */
.rc { display: contents; }   /* container sem caixa própria: não vira flex item do .app */
.rc-faixa, .rc-scrim, .rc-card, .rc-msg,
.rc .rc-vis-show, .rc .rc-vis-retrying, .rc .rc-vis-failed, .rc .rc-vis-rejected { display: none; }

/* --- faixa (queda curta: avisa, não bloqueia) --- */
#components-reconnect-modal.components-reconnect-show .rc-faixa,
#components-reconnect-modal.components-reconnect-retrying .rc-faixa,
#components-reconnect-modal.components-reconnect-paused .rc-faixa { display: flex; }
#components-reconnect-modal.components-reconnect-show .rc-vis-show,
#components-reconnect-modal.components-reconnect-paused .rc-vis-show,
#components-reconnect-modal.components-reconnect-retrying .rc-vis-retrying { display: inline; }

.rc-faixa {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1300;
  align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  background: var(--surface); color: var(--text); font-size: 13px;
  border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 9px;
  padding: 9px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: toastin .18s ease-out;
}
.rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: 0 0 auto; animation: rcpulse 1.1s ease-in-out infinite; }
.rc-cont { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.rc-act { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: none; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--sans); }
.rc-act:hover { filter: brightness(1.1); }
.rc-act[disabled] { opacity: .55; cursor: default; }
@keyframes rcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- cartão (tentativas esgotadas ou sessão morta: aí sim bloqueia) --- */
#components-reconnect-modal.components-reconnect-failed .rc-scrim,
#components-reconnect-modal.components-reconnect-rejected .rc-scrim { display: block; }
#components-reconnect-modal.components-reconnect-failed .rc-card,
#components-reconnect-modal.components-reconnect-rejected .rc-card { display: block; }
#components-reconnect-modal.components-reconnect-failed .rc-vis-failed,
#components-reconnect-modal.components-reconnect-rejected .rc-vis-rejected { display: block; }

.rc-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1300; }
.rc-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1301;
  width: 440px; max-width: 92vw; background: var(--canvas); border: 1px solid var(--border);
  border-top: 3px solid var(--danger); border-radius: 12px; padding: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center;
}
.rc-ico { font-size: 26px; color: var(--danger); line-height: 1; margin-bottom: 10px; }
.rc-card .rc-titulo { font-size: 16px; font-weight: 700; color: var(--text-emph); margin-bottom: 8px; }
.rc-card .rc-body { font-size: 13.5px; color: var(--text); line-height: 1.55; margin: 0 0 18px; }
.rc-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rc-acts .btn[disabled] { opacity: .55; cursor: default; }

@media (max-width: 700px) {
  .rc-faixa { left: 8px; right: 8px; transform: none; max-width: none; }
}

/* segment toggle (board/lista) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.seg button { background: transparent; color: var(--muted); border: none; padding: 7px 18px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.seg button.on { background: var(--surface-2); color: var(--accent); }

/* theme + cost + chips (perfil / produto) */
.themecards { display: flex; gap: 10px; }
.themecard { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--surface); }
.themecard.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.swatches { display: flex; gap: 5px; margin-bottom: 8px; }
.sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); }
.themecard .tn { font-weight: 600; color: var(--text-emph); font-size: 13px; }
.themecard .td { font-size: 11px; color: var(--muted); }
.costbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 4px; }
.costline { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.costline .v { font-family: var(--mono); }
.costline.tot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--text-emph); }
.chiptog { display: flex; flex-wrap: wrap; gap: 7px; }
.ctag { font-size: 12px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.ctag.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bomrow { display: grid; grid-template-columns: 1fr 70px 80px 24px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bomrow select, .bomrow input { padding: 7px 8px; font-size: 12.5px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); }
/* Linha auxiliar abaixo de uma .bomrow ("filamento escolhido no pedido" + papel, itens na mesa, opções
   do campo de especificação). Não tinha regra NENHUMA no CSS — nem layout, nem input: os campos saíam
   crus e desalinhados logo abaixo de campos estilizados. Estilo compacto, no molde da .bomrow. */
.bomvar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 8px; }
.bomvar > input, .bomvar > select { padding: 7px 8px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: var(--sans); }
/* Linha da lista de placas (tempo por placas): rótulo · tempo · ✕. A .bomrow padrão tem 4 colunas
   (seletor, qtd, subtotal, ✕); aqui são 3 e a linha não precisa da largura toda. */
.bomrow.tempoplaca { grid-template-columns: 1fr 96px 24px; max-width: 380px; }
.bomsub { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; }
.bomdel { cursor: pointer; color: var(--muted); text-align: center; font-size: 15px; background: none; border: none; }
.bomdel:hover { color: var(--danger); }
/* Botão "adicionar linha": pertence à lista logo acima, por isso ocupa a largura toda
   (afordância clara de ação — antes era um link de texto que se confundia com o conteúdo). */
.addrow { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; text-align: center; transition: border-color .12s ease, background .12s ease, transform .07s ease; }
.addrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.addrow:active { transform: scale(.995); }
/* Variante para cabeçalhos/toolbars: continua botão, mas inline e do tamanho do conteúdo. */
.addrow.compacta { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 4px 10px; border-radius: 20px; text-align: left; }
.addinline { display: flex; gap: 8px; margin-top: 12px; }
.addinline input, .addinline select { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); }
.addinline select { flex: 0 0 auto; }
.addinline .btn { flex: 0 0 auto; }

.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

/* ============ HELP TIP (glossário inline, 11c-1) ============ */
/* O "?" nasce laranja EM REPOUSO (não só no hover): quem não passa o mouse nunca descobria que havia
   ajuda ali. 17px e --help-soft de fundo — o mesmo "?" da calculadora pública. */
.htip { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--help-border);
    background: var(--help-soft); color: var(--help); font-family: var(--mono); font-size: 10.5px;
    font-weight: 700; line-height: 1; cursor: help;
    margin-left: 5px; vertical-align: middle; user-select: none; flex: 0 0 auto; }
.htip:hover, .htip:focus-visible { border-color: var(--help); outline: none; }
.htip-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(260px, 78vw); background: var(--canvas); border: 1px solid var(--help-border);
    border-radius: 9px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 70;
    opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; text-align: left;
    white-space: normal; font-family: var(--sans); }
.htip.baixo .htip-pop { bottom: auto; top: calc(100% + 8px); }
.htip:hover .htip-pop, .htip:focus .htip-pop { opacity: 1; visibility: visible; }
.htip-t { display: block; font-size: 12px; font-weight: 700; color: var(--help); margin-bottom: 4px; }
.htip-x { display: block; font-size: 11.5px; color: var(--text); line-height: 1.5; font-weight: 400; letter-spacing: normal; text-transform: none; }

/* O balão de verdade (helptip.js): UM elemento no TOP LAYER (Popover API), fora do fluxo do
   documento — imune a overflow de drawer/painel/lista e a stacking context do pai, que é o que
   recortava e escondia o balão antigo. Posição em coordenadas de viewport, calculada no JS (flip
   vertical + clamp horizontal de 8px). Nasce display:none: o atributo popover só é aplicado quando
   o script roda, e sem isso ele piscaria na página no primeiro paint. Os tokens vêm do data-theme
   que o JS copia do .app (o elemento vive fora dele — mesmo caso do modal de reconexão). */
#htip-pop { display: none; position: fixed; margin: 0; inset: auto; width: max-content;
    max-width: min(270px, 86vw); background: var(--canvas); border: 1px solid var(--help-border);
    border-radius: 9px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); text-align: left;
    white-space: normal; font-family: var(--sans); color: var(--text); overflow: visible; }
#htip-pop:popover-open { display: block; }
#htip-pop::backdrop { background: transparent; }
/* Com o JS ligado, o balão inline (fallback) fica fora do caminho — senão apareceriam dois. */
html.htip-js .htip-pop { display: none; }

/* ============ NOTA CONTEXTUAL (a mesma luz da ajuda) ============ */
/* A nota que EXPLICA A REGRA dentro de um drawer ("o CMV congela agora", "estorno não apaga") ganha a
   identidade da ajuda: borda lateral laranja + fundo soft. Diferente do .note (dica neutra tracejada)
   e do .notebox (aviso com intenção: ac/ig/wn). Regra de bolso: se o texto ENSINA por que o sistema
   faz assim, é .nota; se avisa que algo está errado, é .notebox.
   Também é a classe que o AjudaLonga emite no bloco Nota dos verbetes — o mesmo cheiro nos dois.
   Escopada em .app de propósito: a calculadora PÚBLICA usa a mesma classe com estilo próprio
   (calculadora-publica.css) e este prompt não a toca. */
.app .nota { border-left: 2px solid var(--help-border); background: var(--help-soft); border-radius: 0 8px 8px 0;
    padding: 9px 11px; margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.app .nota b, .app .nota strong { color: var(--text-emph); font-weight: 700; }
.app .nota a, .app .nota .link { color: var(--help); }

/* Link de ajuda ("como funciona esta tela?") — estrutura de ajuda, então laranja; o .link comum
   continua no accent do tema, que é a cor da AÇÃO. */
.link.link-ajuda { color: var(--help); text-decoration: underline; text-underline-offset: 3px; }

/* ============ CAMADA DE AJUDA DOS PAINÉIS (a mesma da calculadora pública) ============ */
/* Portado de calculadora-publica.css usando os tokens --help*. A pública continua com o CSS dela
   (migra para os tokens em sweep próprio); tudo aqui é escopado em .app para os dois não se cruzarem.

   .hint  — a frase de uma linha sob o h3 do painel. Fica em --muted de propósito: a COR da ajuda mora
            no "?" e nas caixas; hint é texto de apoio, não banner.
   details.ajuda — a ajuda LONGA (mesmos verbetes da pública), fechada por padrão: convida sem gritar.
   .origem — de onde vem um número que veio do CADASTRO, com o deep-link para ajustar. É a tradução
             interna do "usar este valor" da pública: lá o visitante digita, aqui o dado já existe —
             duplicar o número em dois lugares seria criar duas verdades. */
.app .hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: -5px 0 12px; }

.app details.ajuda { border: 1px dashed var(--help-border); border-radius: 10px; margin-top: 12px; background: var(--surface-2); }
.app details.ajuda > summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; color: var(--help);
    list-style: none; display: flex; gap: 7px; align-items: center; }
.app details.ajuda > summary::-webkit-details-marker { display: none; }
.app details.ajuda > summary::before { content: "?"; display: grid; place-items: center; width: 17px; height: 17px;
    flex: none; border: 1px solid var(--help-border); border-radius: 50%; font: 700 11px var(--mono);
    color: var(--help); background: var(--help-soft); }
.app details.ajuda[open] > summary { border-bottom: 1px dashed var(--help-border); }
.app .ajuda-corpo { padding: 14px 14px 16px; font-size: 13px; color: var(--muted); line-height: 1.62; }
.app .ajuda-corpo h4 { color: var(--text-emph); font-size: 13.5px; margin: 14px 0 5px; }
.app .ajuda-corpo h4:first-child { margin-top: 0; }
.app .ajuda-corpo p { margin: 0 0 8px; }
.app .ajuda-corpo ol { margin: 0 0 4px 18px; padding: 0; }
.app .ajuda-corpo li { margin-bottom: 5px; }
.app .ajuda-corpo strong { color: var(--text); }
.app .ajuda-corpo .rodape { font-size: 11.5px; opacity: .8; }
/* #294 — AjudaGrupo: uma sanfona com os verbetes do painel abertos dentro, cada um como subtítulo. */
.app details.ajuda > summary .ajuda-n { margin-left: auto; color: var(--muted); font-size: 11px; }
.app .ajuda-grupo-corpo .ajuda-corpo.aberta { padding: 12px 14px 10px; }
.app .ajuda-grupo-corpo .ajuda-corpo.aberta + .ajuda-corpo.aberta { border-top: 1px dashed var(--help-border); }

.app .origem { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); margin-top: 10px; }
.app .origem::before { content: "⚙"; flex: none; opacity: .8; }
.app .origem a { color: var(--help); text-decoration: underline; text-underline-offset: 3px; }

/* ============ EMPTY STATE (11c-1) ============ */
.empty { text-align: center; padding: 38px 20px; }
.empty-ic { font-size: 30px; line-height: 1; opacity: .45; margin-bottom: 10px; }
.empty-t { font-size: 15px; font-weight: 700; color: var(--text-emph); margin-bottom: 5px; }
.empty-x { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 340px;
    margin: 0 auto 14px; text-transform: none; letter-spacing: normal; }
.empty .btn { text-decoration: none; }
td .empty { padding: 30px 20px; }

/* ============ AUTH (login) ============ */
.authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canvas); padding: 20px; }
.authcard { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.authbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.authbrand .nm { font-weight: 800; color: var(--text-emph); font-size: 18px; }
.authbrand .tg { font-size: 10.5px; color: var(--muted); }
.authtitle { font-size: 16px; color: var(--text-emph); margin: 0 0 16px; }
.autherr { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border: 1px solid var(--danger); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 14px; }
.validation-message { color: var(--danger); font-size: 11.5px; display: block; margin-top: 4px; }

/* Tela de termos: card de LEITURA, não de login (dois documentos jurídicos, não 3 campos).
   :has() sobe a largura só quando o conteúdo pede — login/registro/reset continuam 360px. */
.authcard:has(.auth-wide) { max-width: 720px; }
.termo-box { max-height: clamp(220px, 45vh, 460px); overflow: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
    margin-bottom: 10px; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.termo-link { margin-bottom: 14px; }
/* Botão: full-width no celular (área de toque), largura própria no desktop (720px de botão é desproporcional). */
.auth-wide .btn[type="submit"] { width: 100%; }
@media (min-width: 641px) { .auth-wide .btn[type="submit"] { width: auto; min-width: 220px; } }

/* ============ TOUR GUIADO (11c-3) ============ */
.tour-scrim { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.tour-spot { position: fixed; z-index: 1201; border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(9,12,20,.62), 0 0 0 2px var(--accent); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tour-balloon { position: fixed; z-index: 1202; width: 300px; max-width: calc(100vw - 16px);
    background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px;
    box-shadow: 0 14px 44px rgba(0,0,0,.45); animation: toastin .18s ease-out; }
.tour-tit { font-size: 14.5px; font-weight: 700; color: var(--text-emph); margin-bottom: 5px; }
.tour-txt { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-prog { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tour-btns { display: flex; gap: 6px; }
.tour-btns .btn { padding: 6px 12px; font-size: 12.5px; }

/* ============ AÇÃO SOB LATÊNCIA (Camadas 0/1 — ANALISE-UX-LATENCIA) ============ */
/* Spinner único; currentColor adapta ao contexto (on-accent no .btn cheio, --text no ghost, --accent no link). */
.spin { display: inline-block; box-sizing: border-box; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; animation: spin .6s linear infinite; }
.spin.sm { width: 9px; height: 9px; border-width: 1.5px; margin-right: 4px; vertical-align: -1px; }
.spin.md { width: 13px; height: 13px; }
.spin.lg { width: 26px; height: 26px; border-width: 3px; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-inner { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn:disabled { cursor: default; }
.btn:disabled:not(.busy) { opacity: .5; filter: none; }   /* desabilitado por domínio: esmaecido */
.btn.busy { opacity: 1; cursor: progress; }               /* ocupado: cheio + spinner (não parece "morto") */
.link.busy { pointer-events: none; opacity: .6; }

/* Camada 1 — resposta imediata ao clique (CSS puro, antes do round-trip do servidor). */
.btn { transition: transform .07s ease, filter .12s ease; }
.btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.94); }
.link { transition: opacity .1s ease; }
.link:active { opacity: .5; }
.card { transition: transform .07s ease, border-color .12s ease; }
.card:active { transform: scale(.985); }
.seg button { transition: transform .07s ease; }
.seg button:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
    .spin, .spin.sm, .spin.md, .spin.lg { animation: none; opacity: .55; }   /* fade estático, sem giro */
    .btn:active:not(:disabled), .card:active, .seg button:active { transform: none; }
    .btn, .card, .seg button, .link { transition: none; }
}

/* ============ MENU RECOLHÍVEL (POC docs/features/minha-bancada-menu/poc-menu-recolhivel.html) ============ */
/* Estado no atributo data-menu do <html> (fora do Blazor): aplicado sem flash pelo script inline do App.razor
   e alternado por bancadaMenu (JS). overflow:visible no .side p/ o PINO escapar; os itens rolam na .navwrap. */
.side { overflow: visible; position: relative; z-index: 50; transition: width .18s ease; }
/* Região rolável dos itens — brand (acima) e foot (abaixo) ficam fixos. Sem isto o menu alto estourava a
   viewport e cortava os itens de baixo em telas menores (o scroll voltou; o pino segue escapando pelo .side). */
.navwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav { position: relative; width: 100%; text-align: left; background: none; border: none; font-family: inherit; }
.nav .lbl { white-space: nowrap; }
.nav.calc { color: var(--accent); font-weight: 600; }
.nav:active { transform: scale(.97); }

/* Botão de recolher na borda direita (fundo de acento, salta aos olhos). Seta por CSS conforme o estado. */
.pin {
  position: absolute; right: -13px; top: 44px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--canvas); color: var(--on-accent);
  cursor: pointer; z-index: 60; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .12s ease, filter .12s ease;
}
.pin::after { content: "«"; font-size: 13px; font-weight: 800; }
html[data-menu="mini"] .pin::after { content: "»"; }
.pin:hover { transform: scale(1.12); filter: brightness(1.08); }
.pin:active { transform: scale(.95); }

/* Flyout — nome do item à direita, só no modo recolhido. Aparência aqui; a POSIÇÃO vem do JS (position:fixed,
   bancadaFlyout em masks.js) p/ escapar o clip do overflow da .navwrap. */
.nav .fly, .userchip .fly {
  display: none; position: fixed; z-index: 99;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-emph);
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none;
}
.nav .fly .grp, .userchip .fly .grp {
  display: block; font-size: 9.5px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
}
.nav .fly::before, .userchip .fly::before {
  content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--surface-2); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* ---- Recolhido (preferência do usuário, via cookie → atributo no <html>) ---- */
html[data-menu="mini"] .side { width: 58px; padding: 14px 7px; }
html[data-menu="mini"] .side .brandtxt { display: none; }
html[data-menu="mini"] .side .navgrp { padding: 10px 0 4px; text-indent: -9999px; border-top: 1px solid var(--border); margin: 6px 6px 0; overflow: hidden; }
html[data-menu="mini"] .side .nav { justify-content: center; padding: 8px 0; gap: 0; }
html[data-menu="mini"] .side .nav .lbl { display: none; }
html[data-menu="mini"] .side .uinfo { display: none; }
html[data-menu="mini"] .side .userchip { justify-content: center; padding: 6px 0; }
/* Sou Maker chip + rodapé recolhidos: só o ícone (o flyout/title cobre o resto). */
html[data-menu="mini"] .side .soumaker { justify-content: center; padding: 7px 0; gap: 0; }
html[data-menu="mini"] .side .soumaker .smtxt { display: none; }
html[data-menu="mini"] .side .footrow { flex-direction: column; }

/* ---- Responsivo: abaixo de 900px recolhe sozinho e some o pino (independe da preferência) ---- */
@media (max-width: 900px) {
  .side { width: 58px; padding: 14px 7px; }
  .side .brandtxt { display: none; }
  .side .navgrp { padding: 10px 0 4px; text-indent: -9999px; border-top: 1px solid var(--border); margin: 6px 6px 0; overflow: hidden; }
  .side .nav { justify-content: center; padding: 8px 0; gap: 0; }
  .side .nav .lbl { display: none; }
  .side .nav-montar-n { display: none; }
  .side .uinfo { display: none; }
  .side .userchip { justify-content: center; padding: 6px 0; }
  .side .soumaker { justify-content: center; padding: 7px 0; gap: 0; }
  .side .soumaker .smtxt { display: none; }
  .side .footrow { flex-direction: column; }
  .pin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }              /* recolher/expandir vira instantâneo */
  .nav:active, .pin:hover, .pin:active { transform: none; }
}

/* ===== Orçamento híbrido (item avulso + G-code) — usa os tokens de tema do app ===== */
.orc-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.orc-ihead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.orc-ihead .t { font-weight: 700; color: var(--text-emph); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Remover item do card. Classe própria (.rm) de propósito: `.drawer .x` é o botão de FECHAR a drawer e
   carrega position:absolute no canto — um ✕ com class="x" aqui escapava do card e ficava sobreposto ao
   de fechar, fazendo o clique apagar o item sem querer. position:static reforça o isolamento. */
.orc-ihead .rm { position: static; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.orc-ihead .rm:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.orc-ibody { padding: 12px; }
.orc-ifoot { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.orc-ifoot .m { font-size: 11px; color: var(--muted); }
.orc-ifoot .m b { font-family: var(--mono); font-size: 13px; color: var(--text-emph); font-weight: 700; margin-left: 4px; }
.orc-ifoot .sp { flex: 1; }
.orc-fil { display: grid; grid-template-columns: 1fr 82px 78px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
.orc-fil input, .orc-fil select { padding: 6px 8px; font-size: 12.5px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); }
.orc-fil .c { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; }
.orc-fil .rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.orc-fil .rm:hover { color: var(--danger); }
.orc-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
.orc-gsum { border: 1px solid var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; font-size: 12px; }
.orc-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.orc-bar i { display: block; height: 100%; border-radius: 6px; }
.orc-conv { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 11px; }
.orc-conv .cn { font-weight: 700; color: var(--text-emph); font-size: 12.5px; margin-bottom: 6px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.orc-radio { display: flex; gap: 8px; align-items: flex-start; padding: 6px 3px; cursor: pointer; border-radius: 7px; }
.orc-radio:hover { background: var(--surface-2); }
.orc-radio .rt { font-size: 12px; color: var(--text); font-weight: 600; }
.orc-radio .rd { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ============ EDITOR SHELL (formulário complexo: 2 colunas + resumo vivo) ============
   Padrão para formulário com DECISÃO ESTRUTURAL ou mais de ~10 campos (ver docs/features/editores-editorshell/ANALISE-FORMULARIOS-UX.md).
   Drawer = consultar e agir; editor = compor.

   Empilhamento: a .side (sidebar) está em z-index 50, então o scrim do editor PRECISA passar disso —
   o .scrim comum (40) deixaria o menu por cima. Picker (40/50) e Dialogo (40/55) renderizam DENTRO do
   .editor e por isso sobem junto; o Toast (60) e o tour (1200+) continuam acima, como devem.

   ⚠ NUNCA colocar transform/filter/backdrop-filter/will-change/contain no .editor.sobreposto: qualquer um
   deles torna o .editor o containing block dos position:fixed filhos e prende o drawer do Picker e o
   Dialogo dentro da caixa rolável. */
.editor-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 52; }
.editor { max-width: 1280px; margin: 0 auto; padding: 10px 10px 40px; }
.editor.sobreposto {
  position: fixed; inset: 3vh 2.5vw; z-index: 53; overflow: auto;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

/* Cabeçalho fixo do editor SOBREPOSTO (é o topo do próprio modal): as ações moram aqui, não no fim do scroll.
   No modo página não existe .ehead — título e ações vão para a barra do topo (.topo-editor, #288).
   Nunca quebra linha (#288): a Meta encolhe com reticências (title tem o texto inteiro) e, com o cabeçalho
   estreito, as ações .sec vão para o "⋯" — ver "Prioridade das ações" abaixo. */
.ehead {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 4px 0 14px; position: sticky; top: 0; background: var(--canvas);
  z-index: 30; border-bottom: 1px solid var(--border); margin-bottom: 16px;
  container-type: inline-size; container-name: ehead;
}
.editor.sobreposto .ehead { top: -18px; padding-top: 22px; margin-top: -18px; }
.ehead h2 { font-size: 18px; color: var(--text-emph); flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehead .cod { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: 15px; flex: none; }
/* flex-shrink alto: com pouco espaço quem cede é a frase, não o título. */
.ehead .meta { color: var(--muted); font-size: 12.5px; flex: 0 100 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehead .sp { flex: 1; }
.ehead .btn, .ehead .pill { white-space: nowrap; flex: none; }
/* Fechar o editor. Item de flex NORMAL, no fim do cabeçalho — de propósito NÃO é position:absolute:
   foi assim que o ✕ do drawer acabou empilhado sobre o ✕ de remover item do card (ver .rm mais acima). */
.ehead .fechar {
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 6px; border-radius: 7px; flex: 0 0 auto;
}
.ehead .fechar:hover { color: var(--text-emph); background: var(--surface-2); }

.cols { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: start; }
/* 68px = altura do .ehead do sobreposto. No modo página não há .ehead: o resumo gruda no gutter (#288). */
.stick { position: sticky; top: 68px; }
.editor:not(.sobreposto) .stick { top: 0; }
/* Modo página: a frase do Meta vira subtítulo no início do corpo — lida uma vez, rola embora. */
.ed-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }

/* Prioridade das ações (#288) — barra do topo (modo página) e .ehead (sobreposto). Ordem de quem cede:
   1º o rótulo do "+ Adicionar" (bloco TOP BAR), 2º as .sec vão para o "⋯", 3º só no telefone estreito o
   primário (o botão SEM .sec) também vai — e aparece no TOPO da folha, em destaque (.prim-item). Nunca 2ª linha. */
.acoes-mais { display: none; }
.ss-item.prim-item { display: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); font-weight: 700; }
@container topo (max-width: 900px) {
  .topo-editor .sec { display: none; }
  .topo-editor .acoes-mais { display: inline-flex; align-items: center; }
}
@container topo (max-width: 640px) { .topo-editor .te-selo { display: none; } }
/* Só sai quem tem para onde ir: sem "⋯" (tela sem MaisAcoes) o primário fica na barra. */
@container topo (max-width: 520px) { .topo-editor .te-acoes:has(> .acoes-mais) > :not(.sec):not(.acoes-mais) { display: none; } }
/* A folha não mora dentro da barra (não enxerga o container): no telefone a barra tem a largura da janela. */
@media (max-width: 520px) { .ss-item.prim-item { display: flex; } }
@container ehead (max-width: 880px) {
  .ehead .sec { display: none; }
  .ehead .acoes-mais { display: inline-flex; align-items: center; }
}
/* Telefone: o selo cede antes do título, que nunca zera — senão o ✕ era empurrado para fora da borda. (O gap do
   próprio .ehead vai no bloco ≤640px: um container não consulta a si mesmo.) */
@container ehead (max-width: 520px) {
  .ehead > .pill { display: none; }
  .ehead h2 { min-width: 4em; font-size: 16px; }
}

/* Seção recolhível: o raro (Referências, Variantes) nasce fechado, com resumo no título.
   .cbody usa display:none — os filhos ficam no DOM, então o estado dos inputs sobrevive. */
.collap > h3 { margin-bottom: 0; cursor: pointer; user-select: none; }
.collap > h3 .cnt { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.collap > h3 .chev { color: var(--muted); font-size: 11px; transition: transform .15s; margin-left: 8px; }
.collap.open > h3 .chev { transform: rotate(90deg); }
.collap .cbody { display: none; margin-top: 12px; }
.collap.open .cbody { display: block; }

/* Campos em linha. ESCOPADOS sob .editor de propósito: .frow já é usada pela ficha de produção impressa
   (.ficha .frow) e .sub pela página pública do pedido — regra global aqui quebraria as duas. */
.editor .frow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.editor .fld { display: flex; flex-direction: column; gap: 4px; }
.editor .fld > label {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; display: flex; align-items: center; gap: 5px;
}
/* CORREÇÃO (22/07): este comentário dizia que um seletor de elemento nu venceria `.field input` em todo
   o app. É FALSO — `input` é (0,0,1) e `.field input` é (0,1,1); a regra de contexto ganha sempre,
   qualquer que seja a ordem. Foi essa premissa errada que deixou o app sem piso de estilo e fez
   controles sem wrapper renderizarem com o default do browser. O piso agora existe no topo da seção
   FORMS; este bloco continua valendo por ser mais específico (tom --canvas em vez de --surface). */
/* DESCENDENTE, não filho: o Picker renderiza `.picker > input`, então com `>` o input dele ficava de
   fora e saía com o tom da regra base (--surface) ao lado de vizinhos em --canvas. É o mesmo
   combinador que `.field input` já usava. Seguro porque a guarda de checkbox/radio está no topo. */
.editor .fld input, .editor .fld select, .editor .fld textarea {
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; color: var(--text); font-size: 13px; font-family: var(--sans);
}
.editor .fld input:focus, .editor .fld select:focus, .editor .fld textarea:focus {
  outline: none; border-color: var(--accent);
}
.editor .fld input[disabled], .editor .fld select[disabled] { opacity: .45; cursor: not-allowed; }
.editor .w-lg { width: 100%; } .editor .w-md { width: 220px; }
.editor .w-sm { width: 110px; } .editor .w-xs { width: 84px; }
.editor .sub { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Seletor de tipo: reusa .opts/.opt (já usados em Clientes e Pedidos). Só o tom do selecionado é novo. */
.editor .opts { grid-template-columns: repeat(3, 1fr); }
.editor .opt.sel { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.editor .opt .ot { display: flex; align-items: center; gap: 7px; }
.editor .opt.sel .ot { color: var(--accent); }

/* Resumo vivo (coluna direita). */
.sumrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; }
.sumrow + .sumrow { border-top: 1px dashed var(--border); }
.sumrow .l { color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sumrow .v { font-family: var(--mono); font-weight: 700; color: var(--text-emph); white-space: nowrap; }
.sumrow.big .v { font-size: 19px; }
.sumrow.big .l { color: var(--text); font-weight: 600; }
/* #294 — Calculadora: o preço sugerido em destaque, o CMV como composição (ResumoCmv Destaque="Sugerido"). */
.sumrow.tot { border-top: 1px solid var(--border); margin-top: 2px; }
.sumrow.tot .l { color: var(--text); font-weight: 600; }
.sumrow.dim .l, .sumrow.dim .v { color: var(--muted); font-weight: 400; }
.resumo-preco .resumo-sub { margin-top: 6px; }
.preco-hero { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 9px; padding: 12px 13px; margin-bottom: 10px; }
.preco-hero .lbl { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preco-hero .lbl small { color: var(--muted); font-size: 11.5px; }
.preco-hero .valor { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1.15; margin-top: 2px; }
.preco-hero .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.preco-hero .verd { margin-top: 9px; padding-top: 9px; border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); font-size: 12.5px; }
.preco-hero .verd .linha { display: flex; justify-content: space-between; gap: 8px; }
.preco-hero .verd .linha.mut { color: var(--muted); }
.preco-hero .verd .v { font-weight: 700; }
.preco-hero .mono { font-family: var(--mono); }
.preco-hero .ok { color: var(--success); } .preco-hero .wn { color: var(--warning); }
.preco-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.preco-kpis .kpi { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); min-width: 0; }
.preco-kpis .k { font-size: 11px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.preco-kpis .v { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text-emph); }
.preco-kpis .v.danger { color: var(--danger); }
.preco-kpis .d { font-size: 10.5px; color: var(--muted); }
.resumo-vazio { padding: 22px 12px; }

/* Aviso colorido. O .note existente é a versão neutra tracejada; esta carrega intenção. */
.notebox { border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-top: 10px; line-height: 1.55;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.notebox b { color: var(--text-emph); }
.notebox.ac { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notebox.ig { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); background: color-mix(in srgb, var(--info) 7%, transparent); }
.notebox.wn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 8%, transparent); color: var(--warning); }
.notebox.wn b { color: var(--warning); }

/* Banner "pré-voo" do motor de preço (spec-precheck-motor). Card com borda-esquerda accent; amarela quando
   só há avisos (nenhuma pendência ⛔ essencial). Some sozinho — o componente nem renderiza sem pendência. */
.precheck { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.precheck.avisos { border-left-color: var(--warning); }
.precheck h4 { font-size: 13px; color: var(--text-emph); display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap; }
.precheck h4 .tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; }
.pc-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.pc-item + .pc-item { border-top: 1px dashed var(--border); }
.pc-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.pc-tt { font-weight: 600; font-size: 13px; }
.pc-sub { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.pc-why { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* Chips dos índices de venda (imposto/reserva/…) — toggle % sobre o preço na calculadora (IndicesChips). */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 99px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; user-select: none; }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.chip.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); }
.chip b { font-family: var(--mono); font-weight: 600; }

/* Margem bruta × líquida lado a lado quando há índices (ResumoCmv / SimulacaoCanal). */
.mgpair { display: flex; gap: 10px; margin-top: 8px; }
.mgpair .mgbox { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.mgpair .mgbox .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.mgpair .mgbox .n { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-top: 2px; }
.mgpair .mgbox .n.success { color: var(--success); }
.mgpair .mgbox .n.warning { color: var(--warning); }
.mgpair .mgbox .n.danger { color: var(--danger); }

/* Imagem compacta nos dados básicos. */
.imgrow { display: flex; gap: 12px; align-items: center; }
.thumb { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 900px é o breakpoint do app (onde a sidebar recolhe sozinha) — o protótipo usava 980, mas dois cortes a
   80px de distância produziriam um degrau visual. */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .stick { position: static; }
  .editor.sobreposto { inset: 0; border-radius: 0; border: none; }
  .editor.sobreposto .ehead { top: 0; margin-top: 0; padding-top: 14px; }
  .editor .opts { grid-template-columns: 1fr; }
}

/* Linha de histórico no resumo do editor (simulações salvas da Calculadora). */
.hrow { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px dashed var(--border); font-size: 12.5px; border-radius: 6px; }
.hrow:last-child { border-bottom: none; }
.hrow:hover { background: var(--surface-2); }
.hrow.on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.hrow .hn { flex: 1; min-width: 0; color: var(--text-emph); font-weight: 600; cursor: pointer; }
.hrow .hd { color: var(--muted); font-size: 11px; font-family: var(--mono); white-space: nowrap; }

/* Configurações — hub de cards + breadcrumb das subpáginas (Modelo C). Nomes próprios (.confcard) para
   não colidir com o .card do board. Grid auto-fill empilha sozinho no mobile. */
.confhub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.confcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  cursor: pointer; transition: border-color .12s, transform .12s; text-decoration: none; display: block; }
.confcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.confcard .ci { font-size: 22px; margin-bottom: 10px; }
.confcard h4 { font-size: 14px; color: var(--text-emph); margin-bottom: 5px; }
.confcard p { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.confcard .cm { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* Card "Sistema": último do hub e de natureza DIFERENTE dos outros — não é configurável, é identificação
   da build. Por isso não é <a>, não navega e não tem o hover de clique; visualmente mais discreto.
   .sis.fora = ambiente que NÃO é produção: borda de acento + aviso, para ninguém trabalhar horas no hml
   achando que é o sistema de verdade. */
.confcard.sis { cursor: default; background: transparent; }
.confcard.sis:hover { border-color: var(--border); transform: none; }
.confcard.sis.fora { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.confcard.sis dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
.confcard.sis dt { font-size: 11px; color: var(--muted); }
.confcard.sis dd { font-size: 12px; color: var(--text-emph); margin: 0; font-family: var(--mono); }
.confcard.sis dd.amb { font-family: inherit; }
.confcard.sis .avs { font-size: 11px; color: var(--text-emph); line-height: 1.5; margin-bottom: 10px; }

.crumbbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; }
.crumbbar .bk { color: var(--accent); font-weight: 600; text-decoration: none; }
.crumbbar .sep { color: var(--muted); }
.crumbbar b { color: var(--text-emph); }

/* Estoque/Financeiro robustez — abas, ledger transparente e drawer type-aware.
   .seg/.ct = contador no chip da aba; tr.est = movimento estornado (esmaecido, riscado);
   tr.out = compra com custo unitário fora da curva (outlier); .clr = limpar filtros;
   .itemtbl = tabela compacta de itens da nota; .kv .l/.v já existem no reset acima. */
.seg .ct { font-family: var(--mono); font-size: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 0 6px; margin-left: 6px; }
tr.est td { opacity: .5; }
tr.est td.desc { text-decoration: line-through; }
tr.out td { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.listbar .clr { margin-left: auto; color: var(--accent); cursor: pointer; font-weight: 600; background: none; border: none; font-size: 12px; }
.itemtbl { width: 100%; border-collapse: collapse; }
.itemtbl th { font-size: 10px; padding: 6px 8px; }
.itemtbl td { padding: 8px; font-size: 12.5px; }
.itemtbl .mini { font-size: 11px; }

/* ============ MANUAL DO MAKER (/ajuda hub + capítulos) ============ */
/* Componentes em Components/Shared/Manual/*. Prefixo mnl-. Só apresentação — sem estado, sem query.
   Tokens do tema (accent/success/warning) mantêm o manual coerente em Nord e Amber. */
.mnl-lead { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 4px 0 18px; max-width: 720px; }

/* hub — busca + grupos + cards */
.mnl-busca { margin: 10px 0 6px; }
.mnl-busca input { width: 100%; max-width: 430px; }
.mnl-grupo { margin-top: 24px; }
.mnl-grupo-t { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mnl-grupo-t::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mnl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mnl-card { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 14px 16px;
  cursor: pointer; text-decoration: none; color: var(--text); display: block; transition: border-color .15s; }
.mnl-card:hover { border-color: var(--accent); }
.mnl-card b { display: block; color: var(--text-emph); font-size: 13.5px; margin-bottom: 4px; }
.mnl-card p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.mnl-selos { margin-top: 9px; display: flex; gap: 6px; }
.mnl-selo { font-size: 9.5px; font-weight: 700; border-radius: 10px; padding: 2px 8px; letter-spacing: .4px; }
.mnl-selo.min { background: var(--border); color: var(--muted); font-family: var(--mono); }
.mnl-selo.video { background: var(--warning); color: #231905; }
@media (max-width: 900px) { .mnl-cards { grid-template-columns: 1fr; } }

/* capítulo — breadcrumb + navegação */
.mnl-crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.mnl-crumb a { color: var(--muted); text-decoration: none; cursor: pointer; }
.mnl-crumb a:hover { color: var(--accent); }
.mnl-crumb b { color: var(--text); }
.mnl-cap h2 { font-size: 18px; color: var(--text-emph); margin: 34px 0 12px; }
.mnl-cap h3 { font-size: 15px; color: var(--text-emph); margin: 26px 0 10px; }
.mnl-cap p { line-height: 1.65; margin: 0 0 13px; font-size: 14px; }
.mnl-prox-ant { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px;
  padding-top: 16px; border-top: 1px solid var(--border); }
.mnl-prox-ant a { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
  text-decoration: none; font-size: 12.5px; color: var(--muted); }
.mnl-prox-ant a b { display: block; color: var(--accent); font-size: 13.5px; margin-top: 2px; }
.mnl-prox-ant a:hover { border-color: var(--accent); }
.mnl-prox-ant a.d { text-align: right; }

/* caixa CONCEITO */
.mnl-conceito { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px;
  background: var(--surface); padding: 16px 20px; margin: 16px 0; }
.mnl-conceito .r { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px; }
.mnl-conceito p:last-child { margin-bottom: 0; }

/* callout (dica / atenção / regra de ouro) */
.mnl-callout { border-radius: 10px; padding: 13px 17px 13px 44px; margin: 15px 0; font-size: 13px;
  line-height: 1.6; position: relative; border: 1px solid var(--border); background: var(--surface); }
.mnl-callout::before { position: absolute; left: 14px; top: 12px; font-size: 15px; }
.mnl-callout.dica { border-left: 4px solid var(--success); } .mnl-callout.dica::before { content: "💡"; }
.mnl-callout.atencao { border-left: 4px solid var(--warning); } .mnl-callout.atencao::before { content: "⚠️"; }
.mnl-callout.regra { border-left: 4px solid var(--accent); } .mnl-callout.regra::before { content: "📌"; }
.mnl-callout b { color: var(--text-emph); }

/* passos numerados com linha vertical */
.mnl-passos { counter-reset: p; margin: 18px 0; }
.mnl-passo { display: flex; gap: 15px; position: relative; padding-bottom: 20px; }
.mnl-passo:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0;
  width: 2px; background: var(--border); }
.mnl-passo .n { counter-increment: p; flex-shrink: 0; width: 31px; height: 31px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--mono); font-size: 13px; z-index: 1; }
.mnl-passo .n::before { content: counter(p); }
.mnl-passo h4 { font-size: 14px; color: var(--text-emph); margin: 3px 0 4px; }
.mnl-passo p { font-size: 13px; margin: 0; line-height: 1.55; }
.mnl-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--accent); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; }
.mnl-ir:hover { border-color: var(--accent); }
.mnl-ir::after { content: "↗"; }

/* mapa em raias (MapaProcesso) */
.mnl-mapa { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px 18px;
  margin: 18px 0; overflow-x: auto; }
.mnl-mapa .tm { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.mnl-lane { display: flex; align-items: center; margin: 8px 0; min-width: 760px; }
.mnl-lane .rl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-right: 2px solid var(--border);
  padding: 4px 2px; margin-right: 12px; min-height: 52px; text-align: center; flex-shrink: 0; }
.mnl-no { border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 7px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--text-emph); text-align: center; flex-shrink: 0;
  min-width: 88px; opacity: .55; }
.mnl-no small { display: block; font-weight: 400; font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.mnl-no.aqui { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.mnl-no.aqui::after { content: "você está aqui"; display: block; font-size: 8.5px; color: var(--accent);
  font-weight: 700; letter-spacing: .6px; margin-top: 2px; text-transform: uppercase; }
.mnl-seta { flex-shrink: 0; width: 28px; height: 2px; background: var(--border); position: relative; margin: 0 2px; }
.mnl-seta::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent;
  border-left-color: var(--border); }

/* vídeo (embed 16:9) */
.mnl-video { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); margin: 16px 0 22px;
  overflow: hidden; }
.mnl-video .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.mnl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mnl-video .leg { font-size: 12px; color: var(--muted); padding: 8px 14px; }

/* tabela "quem liga com quê" (capítulo vínculos) */
.mnl-tabela { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.mnl-tabela th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mnl-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--border); line-height: 1.5; vertical-align: top; }
.mnl-tabela td b { color: var(--text-emph); }

/* ============ MOBILE M1 — fundação touch ============ */
/* Contrato de breakpoints (spec docs/features/mobile-maker/spec-mobile-m1-fundacao-touch.md, 31/07/2026):
     ≤640px    = TELEFONE  — tab bar inferior + folha "Mais", drawer→bottom sheet, header compacto, tabela→card.
     641–900px = TABLET/estreito — sidebar mini + flyout de HOVER (comportamento ATUAL; NÃO mexer).
     >900px    = DESKTOP   — intocável.
   Todo o CSS mobile desta spec vive NESTE bloco no fim do arquivo (minimiza conflito com os estilos do
   manual, mnl-*). A densidade de toque fica em @media(pointer:coarse) — vale em QUALQUER largura (telefone,
   tablet, laptop com tela sensível), independente do corte de layout: no mouse (pointer:fine) nada muda. */

/* ---- Densidade de toque (qualquer ponteiro grosso) ------------------------------------------------- */
@media (pointer: coarse) {
  /* Inputs ≥16px matam o zoom automático que o iOS aplica ao focar controle com fonte <16px.
     Os seletores de CONTEXTO (.field/.bomrow/.editor .fld/… até especificidade (0,2,1)) vencem a guarda
     :where() do reset (0,0,1) — por isso repetimos cada contexto aqui; senão o input estilizado ficaria em
     13/12,5px e o zoom voltaria. Estilo da casa (ver reset em FORMS): especificidade, não !important. */
  input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])),
  select, textarea,
  .field input, .field select, .field textarea,
  .bomrow input, .bomrow select, .bomvar > input, .bomvar > select,
  .orc-fil input, .orc-fil select, .addinline input, .addinline select,
  .editor .fld input, .editor .fld select, .editor .fld textarea,
  .pager select, .search, .listbar select, .listbar input { font-size: 16px; }

  /* Alvos de toque ≥44px via PADDING (min-height), nunca por font-size. */
  .btn, .seg button, .pager .btn, .addrow, .bomdel, .drawer .x { min-height: 44px; }
  .drawer .x { min-width: 44px; }
  label.check { min-height: 44px; }   /* a LINHA inteira vira alvo; o quadradinho segue pequeno */
}

/* ---- Etapa 3: tab bar + folha "Mais". Base = ESCONDIDA; só o telefone (≤640px) liga. ---------------- */
.tabbar, .tabscrim, .tabsheet { display: none; }
@keyframes m1-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes m1-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- ≤640px: TELEFONE ------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --content-pad: 7px; }
  /* Reserva a faixa da tab bar no rodapé do conteúdo, com safe-area do iOS. */
  .content { padding: var(--content-pad) var(--content-pad) calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* A sidebar cede lugar à tab bar (entre 641–900px a sidebar mini continua — NÃO mexer). */
  .side { display: none; }

  /* Tab bar fixa no rodapé. z-index 30: o scrim do drawer (40) a cobre quando um drawer abre. */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .tabbar .tab {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; color: var(--muted); text-decoration: none;
    font-size: 9.5px; font-weight: 600; font-family: var(--sans);
    background: none; border: none; cursor: pointer;
  }
  .tabbar .tab .i { font-size: 19px; line-height: 1; }
  .tabbar .tab.active, .tabbar .tab.on { color: var(--accent); }
  .tabbar .tab.active .i, .tabbar .tab.on .i { transform: translateY(-1px); }
  .tabbar .tab .tabbadge { position: absolute; top: 9px; left: calc(50% + 9px); width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }

  /* Folha "Mais" — bottom sheet (mesmo padrão da Etapa 4). scrim/sheet acima da tab bar. */
  .tabscrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 48; animation: m1-scrim-in .18s ease; }
  .tabsheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    max-height: 88%; overflow-y: auto; background: var(--canvas);
    border: 1px solid var(--border); border-bottom: none; border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: m1-sheet-up .22s ease;
  }
  .tabsheet .alca { width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 8px; flex-shrink: 0; }
  .tabsheet .navgrp { padding: 12px 6px 4px; }
  .maisitem {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 8px;
    border-radius: 10px; color: var(--text); text-decoration: none; text-align: left;
    background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  }
  .maisitem:active { background: var(--surface-2); }
  .maisitem.active { color: var(--accent); background: var(--surface-2); }
  .maisitem .ic { width: 24px; text-align: center; flex-shrink: 0; opacity: .85; }
  .maisitem .ml { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .maisitem .ml small { font-size: 11px; color: var(--muted); font-weight: 400; }
  .maisitem .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 6px; }
  .maisitem.sm .ic { color: var(--accent); }
  .maisform { margin: 0; width: 100%; }
  .maisdiv { border-top: 1px solid var(--border); margin: 8px 0; }
  .maisfechar { width: 100%; min-height: 48px; margin-top: 6px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
}

/* ---- Etapa 4: drawer → bottom sheet · Etapa 5: header compacto (telefone) -------------------------- */
@media (max-width: 640px) {
  /* Etapa 4 — o MESMO .drawer (mesmos usos, só CSS) vira folha de baixo: full-width, colado no rodapé,
     cantos arredondados em cima, alça visual, safe-area no fundo. O .scrim (z40) fica inalterado. */
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: 92%;
    border-left: none; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.3);
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: m1-sheet-up .22s ease;
  }
  .drawer::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: -8px auto 12px; }
  .drawer .x { top: 12px; right: 12px; }   /* alvo ≥44px já vem do bloco pointer:coarse */

  /* Etapa 4b — editor sobreposto (já full-screen ≤900px): o ehead não quebra linha (#288); a meta some no
     telefone para não competir com título + ação primária + ✕. */
  .editor.sobreposto .ehead .meta { display: none; }
  .editor.sobreposto .ehead { gap: 8px; }

  /* Etapa 5 — header compacto: título + PrimaryAction; crumb some; altura menor. O mecanismo
     HeaderState / botão plano do MainLayout NÃO muda. */
  .top { height: 48px; padding: 0 14px; }
  .top .crumb { display: none; }
  .top:has(.topo-editor > *) { gap: 8px; }
}

/* ---- Etapa 6: tabela → card (Variante A, fallback genérico). Só ≤640px: com a classe inerte no
   desktop, `table.stack` = tabela normal (mesmas regras globais de `table`), diff zero. Variante B
   (card curado por tela) é M2, fora desta spec. Piloto: Lista da Produção. -------------------------- */
@media (max-width: 640px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack thead { display: none; }
  table.stack tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 6px 0; }
  table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; border: none; font-size: 13px; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; flex-shrink: 0; }
  /* Célula de ações (quando a tabela tiver): sem rótulo, ações embaixo com wrap. */
  table.stack td.acoes { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; flex-wrap: wrap; justify-content: flex-start; }
  table.stack td.acoes::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tabsheet, .tabscrim, .drawer { animation: none; }   /* sem slide/fade dos sheets */
}

/* ---- ListaPadrao — responsividade (Entrega 7, achado de homologação mobile) ------------------------
   Camada 1: a tabela rola na horizontal DENTRO do painel (nunca vaza o box nem rola a página). Vale para
   toda tela que usa o ListaPadrao, sem mudança por tela.
   Camada 2: modo cartão ≤640px, só quando a tela passa o template Cartao (senão fica só a camada 1). */
.lp-scroll { overflow-x: auto; }
.lp-cards { display: none; }
@media (max-width: 640px) {
  .lp-scroll table.lp-hide-mobile { display: none; }   /* some só onde há cartão para substituir */
  .lp-cards { display: flex; flex-direction: column; gap: 10px; }
  .lp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
             padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
  .lp-card .lp-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .lp-card .lp-card-top .lp-id { font-family: var(--mono); color: var(--accent); font-weight: 700; }
  .lp-card .lp-card-top .lp-val { font-weight: 700; }
  .lp-card .lp-card-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .lp-card .lp-card-sub { color: var(--muted); font-size: 12.5px; }
}

/* ============ MOBILE M2 — fluxos do maker ============ */
/* Etapa 1 — board carrossel + "mover para ▸". Só ≤640px (ou classes inertes no desktop): o drag do
   board segue intacto >640px. */
.mv { display: none; }   /* chip "mover para ▸" — só no telefone; no desktop o caminho é o drag */
@media (max-width: 640px) {
  .board { scroll-snap-type: x mandatory; }   /* uma coluna por vez (era proximity) */
  .col { width: 86vw; }                        /* a próxima coluna espia na borda */
  .mv {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 20px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--sans);
  }
  .mv:active { border-color: var(--accent); color: var(--accent); }
}

/* StatusSheet ("mover para ▸") — é um drawer/sheet: vale em qualquer largura (vira folha ≤640px pela M1). */
.ss-lista { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.ss-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); text-align: left;
}
.ss-item:active { border-color: var(--accent); }
.ss-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ss-item .ss-nm { flex: 1; }
.ss-item.atual { opacity: .55; cursor: default; }
.ss-item:disabled { opacity: .5; cursor: not-allowed; }
.ss-grupo { display: contents; }   /* itens da folha do "⋯" passados num template de raiz única (#288) */
.ss-item .ss-aqui { font-size: 11px; color: var(--muted); font-weight: 400; }
.ss-extra { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.acao-perigo {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px;
  background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--danger);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); text-align: left;
}
.acao-perigo:active { border-color: var(--danger); }

/* Etapa 2 — conclusão de OP no toque: o rodapé do drawer empilha full-width no telefone (o botão
   "Concluir e congelar CMV" fica largo; o ✕/Cancelar acima). Os inputmode=decimal vão no markup. */
@media (max-width: 640px) {
  .dfoot { flex-direction: column; }
  .dfoot > * { width: 100%; }
}

/* Etapa 3 — Calculadora Variante T: strip de resultado sticky + acordeão. As ações secundárias no "⋯" seguem a
   prioridade do EDITOR SHELL (#288). */
.mstrip { display: none; }              /* strip só ≤640px */
@media (max-width: 640px) {
  .mstrip {
    display: block; position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px;
  }
  .mstrip-bar { display: flex; align-items: stretch; cursor: pointer; }
  .mstrip-cell { flex: 1; padding: 8px 4px; text-align: center; border-left: 1px solid var(--border); }
  .mstrip-cell:first-child { border-left: none; }
  .mstrip-cell .l { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
  .mstrip-cell .v { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--text-emph); margin-top: 2px; }
  .mstrip-cell .v.success { color: var(--success); }
  .mstrip-cell .v.warning { color: var(--warning); }
  .mstrip-cell .v.danger  { color: var(--danger); }
  .mstrip-cell.mstrip-hot .v { color: var(--accent); font-size: 15px; }
  .mstrip-cell .v.mstrip-vazio { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 500; }
  .mstrip-chev { display: flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 12px; }
  .mstrip-body { border-top: 1px solid var(--border); padding: 10px 12px; max-height: 62vh; overflow-y: auto; }
  .cols.com-strip .stick { display: none; }   /* o resumo vive no acordeão do strip */
  /* Modo página (#288): a faixa encosta na barra do topo, de borda a borda — top negativo cobre o gutter (sticky
     respeita o padding do .content) e a margem negativa soma o gutter + o padding lateral do .editor. Nada mais
     gruda acima dela: sem .ehead neste modo, os números nunca somem atrás de um cabeçalho. */
  .editor:not(.sobreposto) .mstrip {
    top: calc(-1 * var(--content-pad));
    margin: 0 calc(-1 * (var(--content-pad) + 10px)) 12px;
    border-radius: 0; border-left: none; border-right: none;
  }
}

/* Etapa 4 — Visão do dia: Agenda cabe em 390px; "✓ concluir" ≥44px no telefone; widgets top-5 + "ver tudo". */
.agnavbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agnav-titulo { cursor: default; min-width: 170px; }   /* estável no desktop (era min-width inline) */
.wmais { font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 600; padding: 7px 2px 2px; }
.wmais:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .agnavbar .seg { flex: 1 1 100%; }               /* cada seg na sua linha — não estoura */
  .agnav-titulo { min-width: 0; flex: 1; text-align: center; }
  .agconcluir { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============ MOBILE M3 — PWA + herança ============ */
/* Etapa 3 — KPIs do dashboard no telefone: 2×2 + exceção (.kpi.alert) em linha cheia no topo.
   !important no .kpicards porque TODO uso tem grid-template-columns INLINE (Home repeat 3;
   Financeiro/Funil/Imobilizado repeat 4) que venceria a regra normal — é a única forma de
   responsivizar sem editar 5 páginas. `order:-1` põe a exceção no topo SEM reordenar o markup
   (desktop intocado). Só ≤640px. Tabelas do dashboard ficam para uso real (fora desta spec). */
@media (max-width: 640px) {
  .kpicards { grid-template-columns: 1fr 1fr !important; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .kpicards .kpi.alert { grid-column: 1 / -1; order: -1; }
}

/* Ficha (Calculadora/produto) no telefone: cada linha quebra em DUAS — o seletor (Picker + lupa)
   em cima, largura total; quantidade, preço e ✕ embaixo. Só ≤640px e só nas linhas .bomficha:
   as .bomrow com grid INLINE (conclusão de OP, variação) e o desktop ficam intocados. */
@media (max-width: 640px) {
  .bomficha { grid-template-columns: 1fr auto auto; }
  .bomficha > :first-child { grid-column: 1 / -1; }
  /* Mesmo molde para a linha de placas: rótulo em cima, tempo e ✕ embaixo. */
  .bomrow.tempoplaca { grid-template-columns: 1fr auto; max-width: none; }
  .bomrow.tempoplaca > :first-child { grid-column: 1 / -1; }
}

/* ============ ASSINATURA / BILLING (spec-billing §8.1) ============ */
/* Página /assinatura. Consolidado aqui a partir de Components/Pages/Assinatura.razor.css — o CSS isolado
   (.razor.css) era órfão: o bundle Bancada.Web.styles.css não é referenciado no App.razor, então nunca
   chegava ao navegador. Regra do projeto: estilo vive no app.css global, com os tokens de tema (Nord/Amber). */
.asn { max-width: 860px; }
.asn .muted { color: var(--muted); }

/* Hero de status */
.asn-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.asn-hero.atraso { border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.asn-hero.pausa { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.asn-hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.asn-plano { font-size: 15px; color: var(--text); }
.asn-plano b { color: var(--text-emph); }
.asn-hero-sub { font-size: 13px; line-height: 1.55; color: var(--text); margin: 10px 0 0; }
.asn-hero-sub b { color: var(--text-emph); }

.asn-pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border: 1px solid; }
.asn-pill.ok { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.asn-pill.wn { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.asn-pill.dg { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.asn-pill.star { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.asn-pill.sa { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 40%, transparent); }

.asn-erro { background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); border-radius: 8px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px; }

/* Cobrança */
.asn-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.asn-kv > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.asn-kv span { display: block; font-size: 11px; color: var(--muted); }
.asn-kv b { font-size: 14px; color: var(--text-emph); }
.asn-pagar { display: inline-block; text-decoration: none; }

/* Fluxo de pagamento (protótipo prototipo-assinatura-pagamento): antecipa a escolha de forma de pagamento
   (dica), nomeia o beneficiário na cobrança (selo-nome) e cobre a volta do Asaas antes do webhook (aguardando). */
.asn-dica { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; }
.asn-dica b { color: var(--text-emph); }
.asn-selo-nome { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 11px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; margin-top: 10px; }
.asn-selo-nome b { color: var(--text-emph); }
.asn-aguardando { background: color-mix(in srgb, var(--info) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); border-radius: 10px; padding: 12px 15px;
    font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.asn-aguardando b { color: var(--text-emph); }
.asn-confirmado { background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; padding: 12px 15px;
    font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.asn-confirmado b { color: var(--text-emph); }

/* Pix dentro do Bancada (spec-ux-pagamento-assinatura §3.1). A INVERSÃO desktop×celular não é cosmética
   (§4.1): no celular ninguém escaneia a própria tela, então o copia e cola é a ação principal e o QR vem
   depois, menor; no desktop o QR manda (a pessoa aponta o celular) e o copia e cola fica ao lado.
   Base = celular (uma coluna, .asn-pix-cc primeiro na ORDEM DO DOM, que é a ordem de leitura). */
.asn-pix { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 12px; padding: 15px 17px; margin-bottom: 14px; }
.asn-pix-t { font-weight: 700; color: var(--text-emph); margin-bottom: 12px; }
.asn-pix-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.asn-pix-copiar { width: 100%; font-size: 15px; padding: 13px 16px; }
.asn-pix-como { font-size: 12.5px; color: var(--muted); margin: 9px 0 6px; }
.asn-pix-como b { color: var(--text-emph); }
.asn-pix-cod { display: block; font-size: 11px; line-height: 1.45; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; word-break: break-all;
    max-height: 74px; overflow: auto; user-select: all; }
.asn-pix-exp { font-size: 12px; color: var(--muted); margin-top: 8px; }
.asn-pix-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.asn-pix-qr img { width: 150px; height: 150px; background: #fff; border-radius: 8px; padding: 6px; }
.asn-pix-qr span { font-size: 11.5px; color: var(--muted); text-align: center; }
.asn-pix-vencido { background: color-mix(in srgb, var(--warning) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: 10px; padding: 12px 15px;
    font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.asn-pix-vencido b { color: var(--text-emph); }

@media (min-width: 760px) {
    /* Desktop: QR primeiro (order), maior, e o copia e cola ao lado — sem mexer na ordem do DOM. */
    .asn-pix-grid { grid-template-columns: 230px 1fr; gap: 20px; }
    .asn-pix-qr { order: 1; }
    .asn-pix-cc { order: 2; }
    .asn-pix-qr img { width: 214px; height: 214px; }
    .asn-pix-copiar { width: auto; font-size: 13px; padding: 9px 15px; }
}

/* Conta em pausa */
.asn-pausa { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.asn-pausa h3 { margin: 0 0 6px; color: var(--text-emph); }
.asn-pausa p { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 12px; }
/* A saída do Hobby é o DESTAQUE do bloco (D4): a pausa não tem prazo, e o que se quer é a pessoa continuar
   usando ao menos o grátis em vez de abandonar. Verde de propósito, contra o vermelho do card da pausa. */
.asn-pausa-hobby { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text); }
.asn-pausa-hobby b { color: var(--text-emph); display: block; margin-bottom: 3px; }

.asn-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Vitrine */
.asn-vitrine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.asn-vitrine-head h3 { margin: 0; color: var(--text-emph); }
.asn-ciclo { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.asn-ciclo button { background: var(--surface); border: none; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.asn-ciclo button.on { background: var(--accent); color: var(--on-accent); }
.asn-eco { font-size: 10px; opacity: .85; }

.asn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.asn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.asn-card.atual { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.asn-card-nome { font-weight: 700; color: var(--text-emph); margin-bottom: 6px; }
.asn-card-preco b { font-size: 20px; color: var(--text-emph); }
.asn-card-preco span { font-size: 12px; color: var(--muted); }
.asn-card-cta { margin-top: 12px; }
.asn-atual-txt { font-size: 12px; font-weight: 700; color: var(--accent); }

/* Uso (Hobby) */
.asn-uso { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.asn-uso-t { font-weight: 700; color: var(--text-emph); margin-bottom: 10px; }
.asn-uso-n { font-size: 12px; line-height: 1.55; margin: 6px 0 0; }
.asn-meter { margin-bottom: 10px; }
.asn-meter-l { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.asn-meter-l b { color: var(--text-emph); }
.asn-meter-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.asn-meter-bar i { display: block; height: 100%; background: var(--accent); }
.asn-meter-bar i.cheio { background: var(--warning); }

/* Meter de limite do plano fora da /assinatura (LimitePlanoAviso: pedido, produto, máquina, usuário).
   Reusa o visual do .asn-meter — o contador é o mesmo objeto, só que ao lado da ação que ele limita. */
.lim-plano { margin-bottom: 12px; }
.lim-plano .asn-meter { margin-bottom: 0; }
.lim-plano .notebox { margin-top: 8px; }

/* Cancelar / confirmar */
.asn-cancelar { margin: 6px 0 10px; }
.asn-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-top: 8px; }

/* Formulário de assinar (accent-dim não existe no tema → accent) */
.asn-form { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px; margin: 8px 0 16px; }
.asn-form h3 { margin: 0 0 12px; color: var(--text-emph); }
.asn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.asn-field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.asn-lgpd { font-size: 12px; line-height: 1.55; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 9px 12px; }
.asn-lgpd b { color: var(--text-emph); }

.asn-ajuda { font-size: 12.5px; margin-top: 8px; }
.asn-ajuda a { color: var(--accent); font-weight: 600; }

/* ============ BANNER DE COBRANÇA (AssinaturaGuard, spec-billing §8.2) ============ */
/* Banner global de "fatura vencida" no topo do conteúdo, na paleta de aviso do tema (Nord/Amber).
   Consolidado de Components/Shared/AssinaturaGuard.razor.css. */
.billing-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 9px 16px; background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); color: var(--text); font-size: 13px; line-height: 1.4; }
/* Variante POSITIVA (fim do teste): accent no lugar do warning — informa, não alarma. */
.billing-banner.trial { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bb-txt { flex: 1 1 260px; }
.bb-txt b { color: var(--text-emph); }
.bb-cta, .bb-link { font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.bb-cta { background: var(--warning); color: var(--on-accent); padding: 5px 12px; border-radius: 6px; }
.bb-cta:hover { filter: brightness(1.05); }
.bb-link { color: var(--accent); padding: 5px 4px; }
.bb-curto { display: none; }
.bb-fechar { background: none; border: 0; color: var(--muted); font-size: 14px; line-height: 1; padding: 6px 4px; cursor: pointer; margin-left: -8px; }
.bb-fechar:hover { color: var(--text-emph); }
/* Celular: o aviso do fim do teste cabe em UMA linha (texto curto + ver planos + ✕) para não roubar a tela. */
@media (max-width: 640px) {
  .billing-banner.trial { flex-wrap: nowrap; gap: 10px; padding: 6px 10px 6px 14px; font-size: 12.5px; }
  .billing-banner.trial .bb-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .billing-banner.trial .bb-longo { display: none; }
  .billing-banner.trial .bb-curto { display: inline; }
  .billing-banner.trial .bb-cta { padding: 4px 10px; }
}

/* ============ PLANO GATE (spec-billing §9.4) ============ */
/* Barra de upgrade + exemplo estático esmaecido nas telas travadas por plano.
   Consolidado de Components/Shared/PlanoGate.razor.css. */
.plano-gate { position: relative; }
.pg-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.pg-lock { font-size: 15px; }
.pg-txt { flex: 1 1 240px; font-size: 13px; color: var(--text); }
.pg-txt b { color: var(--text-emph); }
.pg-cta { white-space: nowrap; text-decoration: none; }
/* O exemplo é estático e read-only: esmaecido + sem interação (não é dado do tenant). */
.pg-exemplo { opacity: .5; pointer-events: none; user-select: none; filter: grayscale(.2); }

/* ============ SIGNUP /cadastro (spec-billing §8.3) ============ */
/* Classes próprias do signup público (as .authtitle/.autherr/.field/.btn são globais).
   Consolidado de Components/Account/Pages/Cadastro.razor.css. */
.authsub { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.authsub b { color: var(--text-emph); }
.authok { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 14px; }
.authhint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.authalt { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.authalt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.linkbtn { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; }
.linkbtn:disabled { color: var(--muted); cursor: default; }

/* ============ GESTÃO À VISTA: Caixa (Financeiro) + Contagem/Balancete (Estoque) ============ */
/* Barra de período com ‹ › — usada pelo Balancete e pelo Caixa. */
.perbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.perbar .plabel { font-family: var(--mono); font-size: 13px; color: var(--text-emph); font-weight: 600; min-width: 170px; text-align: center; }
.perbar .btn { padding: 5px 11px; font-size: 14px; line-height: 1; }
.perbar .seg { margin-bottom: 0; }

/* Contagem: campo do "contado", linha divergente e rodapé fixo da ação em lote. */
input.cnt { width: 96px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; color: var(--text-emph); font-family: var(--mono); font-size: 13px; text-align: right; }
input.cnt:focus { outline: none; border-color: var(--accent); }
input.obs { width: 180px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; color: var(--text); font-size: 12px; }
input.obs:focus { outline: none; border-color: var(--accent); }
tr.diff td { background: color-mix(in srgb, var(--warning) 7%, transparent); }
.cntfoot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cntfoot .sum { font-size: 12.5px; color: var(--muted); }
.cntfoot .sum b { color: var(--text-emph); font-family: var(--mono); }
.cntfoot .btn { margin-left: auto; }

/* Caixa: gráfico espelhado por dia, barras de categoria e a linha de hoje no extrato. */
.caixachart { width: 100%; height: 220px; display: block; }
.chartleg { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.chartleg .chip { display: flex; align-items: center; gap: 6px; }
.chartleg .dot { width: 10px; height: 10px; border-radius: 3px; }
.catrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.catrow .cn { width: 150px; color: var(--text); }
.catrow .track { flex: 1; height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.catrow .fill { height: 100%; border-radius: 4px 0 0 4px; }
.catrow .cv { font-family: var(--mono); width: 96px; text-align: right; color: var(--text-emph); }
.catrow .cp { font-family: var(--mono); width: 44px; text-align: right; color: var(--muted); font-size: 11px; }
tr.hoje td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

@media (max-width: 720px) {
    .catrow .cn { width: 110px; }
    input.obs { width: 130px; }
    .cntfoot .btn { margin-left: 0; width: 100%; }
}

/* ============ RAIO-X LOGADO (/raio-x-arquivo) ============ */
/* A gêmea interna do /raio-x público: mesma leitura (barra proporcional, faixas, achados), R$ do custo do tenant.
   Cores das fatias iguais às do público — a peça é neutra de propósito; o olho cai no desperdício. */
.rx-arquivo { display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 8px; flex-wrap: wrap; }
.rx-arquivo .num { color: var(--text-emph); }
.rx-vinculos { display: flex; flex-direction: column; gap: 4px; }
.rx-vinculo { display: flex; gap: 8px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.rx-vinculo .sw, .rx-custo .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); margin-right: 6px; vertical-align: -1px; }
.rx-aviso { color: var(--warning); font-size: 12px; }
.rx-aviso small { font-size: 11px; }
.rx-aviso-nota { border-color: var(--warning); }
.tag.rx-estimativa { color: var(--help); border: 1px solid var(--help-border); background: var(--help-soft); border-radius: 20px; padding: 1px 8px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-size: 10px; }
.rx-barra { display: flex; height: 28px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin: 6px 0 4px; }
.rx-barra .rx-seg { display: grid; place-items: center; font: 700 11px var(--mono); color: rgba(0, 0, 0, .62); min-width: 0; }
.rx-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 12px; font-size: 12px; color: var(--muted); }
.rx-legenda i.rx-seg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
td i.rx-seg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.rx-seg.paredes { background: #81a1c1; } .rx-seg.preenchimento { background: #5e81ac; } .rx-seg.superficies { background: #88c0d0; }
.rx-seg.suporte { background: #bf616a; } .rx-seg.aderencia { background: #b48ead; } .rx-seg.purga { background: #f1880d; } .rx-seg.outros { background: #4c566a; }
table.rx-partes th.r, table.rx-partes td.r { text-align: right; }
table.rx-partes td { vertical-align: top; white-space: nowrap; }
table.rx-partes td:first-child { white-space: normal; }
table.rx-partes .rx-faixa { display: block; font: 11px var(--mono); color: var(--muted); }
table.rx-partes .rx-faixa.ok { color: var(--success); }
table.rx-partes tr.total td { border-bottom: none; border-top: 1px solid var(--border); font-weight: 700; color: var(--text-emph); }
details.rx-placa { margin-top: 10px; border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; }
details.rx-placa summary { cursor: pointer; font-size: 13px; }
.rx-achado { background: var(--surface-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.rx-achado.alto { border-left-color: var(--danger); } .rx-achado.medio { border-left-color: var(--help); } .rx-achado.nota { border-left-color: var(--info); }
.rx-achado .t { font-size: 13.5px; color: var(--text-emph); font-weight: 650; margin-bottom: 3px; }
.rx-achado .ev { font-size: 12px; color: var(--help); margin-bottom: 6px; }
.rx-achado.nota .ev { color: var(--info); }
.rx-achado p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.rx-achado .ganho { text-align: right; white-space: nowrap; }
.rx-achado .ganho .g { font: 700 15px var(--mono); color: var(--success); }
.rx-achado .ganho .d { font: 11px var(--mono); color: var(--muted); }
.rx-achado .ganho .na { font: 11.5px var(--mono); color: var(--muted); font-style: italic; }
.rx-custo { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
@media (max-width: 720px) { .rx-achado { grid-template-columns: minmax(0, 1fr); } .rx-achado .ganho { text-align: left; } }

/* Preview de impacto do custo-hora (spec-custos-invisiveis, tela 1). Borda tracejada porque o número ainda
   NÃO foi salvo: é uma simulação do que a edição faria com o futuro — pedido e OP concluídos nunca mudam. */
.impacto { border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--border)); border-radius: 10px;
  padding: 10px 12px; margin: 12px 0; font-size: 12.5px; line-height: 1.6;
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.impacto .num { font-size: 15px; color: var(--text-emph); }

/* ── Vitrine pública (spec-vitrine-publica F0/F1) — telas INTERNAS no tema do app. A estética da loja pública não
   mora aqui: só a PRÉVIA da paleta (.vit-previa) pinta com as cores derivadas, e por style inline vindo do
   PublicTheme — nunca com a cor crua do maker. */
.vit-toggle { font-size: 13px; margin: 2px 0 6px; }
.vit-motivo { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; max-width: 220px; }
a.vit-motivo { color: var(--help); }
.vit-cel { min-width: 120px; }
.vit-cont { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 10px 0 8px; }

.vgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.vmid { border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface); cursor: grab;
  display: flex; flex-direction: column; gap: 6px; transition: border-color .12s ease, opacity .12s ease; }
.vmid.sobre { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vmid.arrastando { opacity: .45; }
.vmid-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 7px; overflow: hidden;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.vmid-img img { width: 100%; height: 100%; object-fit: cover; }
.vmid-ex { font-size: 30px; }
.vmid-play { position: absolute; font-size: 20px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.vmid-capa { position: absolute; top: 6px; left: 6px; }
.vmid-tit { font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmid-alt { width: 100%; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 7px; color: var(--text); font-family: var(--sans); }
.vmid-acoes { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11.5px; flex-wrap: wrap; }
.vit-add { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.vit-video { display: flex; gap: 8px; flex-wrap: wrap; }
.vit-video input { flex: 1; min-width: 200px; }

.vit-slug { display: flex; align-items: stretch; max-width: 520px; }
.vit-slug-pre { display: flex; align-items: center; padding: 0 10px; font: 12.5px var(--mono); color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; white-space: nowrap; }
.field .vit-slug input { border-radius: 0 8px 8px 0; font-family: var(--mono); min-width: 0; }
.vit-disp { font-size: 12px; margin-top: 6px; }
.vit-disp.ok { color: var(--success); }
.vit-disp.dg { color: var(--danger); }
.vit-opts { flex-wrap: wrap; }
.vit-opts .opt { min-width: 180px; }
.vit-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vit-preset { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.vit-preset.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vit-bola { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; flex-shrink: 0; }
.vit-preset .vit-bola { margin-right: 0; }
.vit-corlivre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.field .vit-corlivre input[type=color] { width: 42px; height: 36px; padding: 2px; }
.field .vit-corlivre input.w-sm { width: 110px; font-family: var(--mono); }
.vit-resultado { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.vit-resultado .vit-bola { margin-right: 0; }
.vit-prazo { display: flex; align-items: center; gap: 8px; }
.field .vit-prazo input { width: 90px; }
.vit-previa { border-radius: 12px; padding: 18px; margin-top: 12px; border: 1px solid var(--border); display: flex; justify-content: center; }
.vit-previa-card { border-radius: 12px; padding: 14px 16px; width: 100%; max-width: 280px; box-shadow: 0 6px 20px rgba(30, 40, 70, .10); }
.vit-previa-nome { font-size: 14px; font-weight: 600; color: #1f2430; }
.vit-previa-preco { font-size: 15px; font-weight: 800; margin: 4px 0 10px; }
.vit-previa-btn { display: inline-block; padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
@media (max-width: 600px) {
  .vit-slug { flex-direction: column; }
  .vit-slug-pre { border-right: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; padding: 6px 10px; }
  .field .vit-slug input { border-radius: 0 0 8px 8px; }
  .vgal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Atalhos da vitrine nas telas internas (tela Vitrine, editor de produto, Produtos). */
.vit-previa-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.55; }
.vit-previa-barra > div { flex: 1; min-width: 220px; }
.vit-endereco { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.vit-endereco code { word-break: break-all; }
.vit-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; font-size: 12.5px; }
.vit-th-link { font-size: 10.5px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.vit-estrela { all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 12px; color: var(--muted);
  margin-top: 3px; padding: 1px 0; }
.vit-estrela:hover { color: var(--accent); }
.vit-estrela.on { color: var(--accent); font-weight: 700; }
.vit-estrela:disabled { cursor: default; opacity: .5; }
.vit-th-dest { display: block; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
/* Lista reordenável (OrdemArrastavel): arrastar no computador, ▲ ▼ no toque. */
.ordem-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-width: 620px; }
.ordem-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); cursor: grab; }
.ordem-item.sobre { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ordem-item.arrastando { opacity: .45; }
.ordem-alca { color: var(--muted); font-size: 14px; }
.ordem-pos { font: 600 12px var(--mono); color: var(--muted); min-width: 16px; text-align: right; }
.ordem-conteudo { flex: 1; min-width: 0; }
.ordem-nome { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordem-conteudo .vit-motivo { max-width: none; }
.ordem-setas { display: flex; gap: 4px; }

/* ── Prévia interna da vitrine (/vitrine/previa). A moldura .vp-loja pinta com a paleta DERIVADA (variáveis inline
   vindas do PublicTheme) — nunca com a cor crua do maker. Visual PROVISÓRIO: a estética da loja pública (F2) ainda
   não foi aprovada; aqui o que vale é o conteúdo. */
.vp-topo .vp-selo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 10px; }
.vp-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.vp-controles .seg { margin-bottom: 0; }
.vp-palco { display: flex; justify-content: center; padding: 6px 0 4px; }
.vp-loja { --txt: #1f2430; --txt2: #55607a; width: 100%; max-width: 1080px; background: var(--bg); color: var(--txt);
  border-radius: 18px; border: 1px solid var(--border); overflow: hidden; overflow: clip; font-family: var(--sans); padding-bottom: 12px; }
.vp-palco.cel .vp-loja { max-width: 400px; }
.vp-cab { text-align: center; padding: 26px 18px 18px; background: var(--soft); }
.vp-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: block; background: var(--surface); }
.vp-inicial { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--ink-on); background: var(--ink); }
.vp-nome { font-size: 20px; font-weight: 800; color: var(--txt); }
.vp-texto { font-size: 13.5px; color: var(--txt2); margin: 6px auto 0; max-width: 520px; line-height: 1.5; }
.vp-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vp-chips span { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font-weight: 600; }
.vp-pecas { padding: 14px; display: grid; gap: 10px; }
.vp-card { all: unset; box-sizing: border-box; cursor: pointer; background: var(--surface); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(30, 40, 70, .07); display: grid; align-items: center; gap: 12px; color: var(--txt); }
.vp-card img, .vp-semfoto { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--soft);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--ink); }
.vp-card-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vp-card-nome { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.vp-card-nome small { color: var(--ink); font-size: 11px; margin-left: 5px; }
.vp-card-preco { font-weight: 800; color: var(--ink); white-space: nowrap; }
.vp-disp { font-size: 11.5px; color: var(--txt2); }
.vp-disp.pronta { color: #2e7d4f; font-weight: 600; }
.vp-cardapio .vp-pecas { max-width: 860px; margin: 0 auto; }
.vp-cardapio .vp-card { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 8px 14px 8px 8px; }
.vp-boutique .vp-pecas { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.vp-palco.cel .vp-boutique .vp-pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-boutique .vp-card { grid-template-columns: 1fr; gap: 6px; padding-bottom: 10px; align-items: start; overflow: hidden; }
.vp-boutique .vp-card img, .vp-boutique .vp-card .vp-semfoto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; }
.vp-boutique .vp-card-txt, .vp-boutique .vp-card-preco { padding: 0 10px; }
.vp-bio .vp-cab { padding: 36px 18px 24px; }
.vp-bio .vp-logo { width: 96px; height: 96px; }
.vp-bio .vp-pecas { max-width: 560px; margin: 0 auto; }
.vp-palco:not(.cel) .vp-bio .vp-pecas { max-width: 860px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-bio .vp-card { grid-template-columns: 56px minmax(0, 1fr) auto; border-radius: 40px; padding: 6px 16px 6px 6px; }
.vp-bio .vp-card img, .vp-bio .vp-card .vp-semfoto { width: 56px; height: 56px; border-radius: 50%; }
.vp-voltar { all: unset; cursor: pointer; display: inline-block; margin: 14px 16px; font-size: 13px; font-weight: 600; color: var(--ink); }
.vp-peca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 0 16px 10px; }
.vp-palco.cel .vp-peca { grid-template-columns: 1fr; }
.vp-foto { width: 100%; height: auto; border-radius: 14px; display: block; background: var(--surface); }
.vp-miniaturas { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vp-miniaturas button { all: unset; cursor: pointer; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
.vp-miniaturas button.on { border-color: var(--ink); }
.vp-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-semfoto.grande { width: 100%; height: auto; aspect-ratio: 4 / 3; font-size: 48px; border-radius: 14px; }
.vp-video { position: relative; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: 12px; overflow: hidden; background: #000; }
.vp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp-info h2 { font-size: 22px; margin: 0 0 6px; color: var(--txt); }
.vp-preco { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.vp-cta { display: block; text-align: center; margin-top: 16px; padding: 12px; border-radius: 30px; background: var(--ink); color: var(--ink-on); font-weight: 700; }
.vp-nota { font-size: 11.5px; color: var(--txt2); margin-top: 8px; text-align: center; }
.vp-vazio { padding: 10px 14px; }
.vp-loja .empty-t { color: var(--txt); }
.vp-loja .empty-x { color: var(--txt2); }
.vp-rodape { text-align: center; font-size: 11px; color: var(--txt2); margin-top: 14px; }

/* ── Loja pública (/loja/{endereço}) — o MESMO desenho da prévia (.vp-*), em página cheia e sem o tema do app.
   O fundo vem da paleta derivada (style inline no .vpub); nada de cor crua do maker. */
.vpub { min-height: 100vh; margin: 0; padding: 0; color: #1f2430; font-family: var(--sans); }
.vpub .vp-loja.vp-publica { max-width: none; border: none; border-radius: 0; background: transparent; min-height: 100vh;
  display: flex; flex-direction: column; }
.vpub .vp-publica .vp-pecas, .vpub .vp-publica .vp-peca { width: 100%; }
.vpub .vp-publica .vp-peca { max-width: 1080px; margin: 0 auto; }
.vpub .vp-publica .vp-voltar { max-width: 1080px; }
.vpub .vp-publica .vp-rodape { margin-top: auto; padding: 18px 0 20px; }
.vpub .vp-publica .vp-rodape .marca { color: #55607a; font-size: 11.5px; }
.vpub .vp-publica .vp-rodape .marca-cta { color: var(--ink); }
@media (min-width: 900px) { .vpub .vp-publica.vp-boutique .vp-pecas { max-width: 1080px; margin: 0 auto; } }
@media (min-width: 1024px) { .vpub .vp-publica.vp-bio .vp-pecas { max-width: 860px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .vpub .vp-publica .vp-peca { grid-template-columns: 1fr; } }
h1.vp-nome, h1.vp-titulo { margin: 0; line-height: 1.25; }
.vp-titulo { font-size: 22px; color: var(--txt); margin-bottom: 6px; }
.vp-chips a { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font-weight: 600; text-decoration: none; }
.vp-falar { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 30px; background: var(--ink);
  color: var(--ink-on); font-weight: 700; font-size: 13px; text-decoration: none; }
a.vp-cta { text-decoration: none; }
.vp-entrega { font-size: 12px; color: var(--txt2); margin-top: 6px; }
.vp-miniaturas a { display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
.vp-miniaturas a.on { border-color: var(--ink); }
.vp-fechada { text-align: center; padding: 28px 18px; color: var(--txt2); }
.vp-fechada-t { font-size: 17px; font-weight: 700; color: var(--txt); margin-bottom: 6px; }
.vp-fechada p { margin: 0; font-size: 13.5px; }
/* ── Vitrine: faixa de destaques e categorias. Mesma projeção nas três peles; muda só o desenho. overflow:clip no
   .vp-loja (e não hidden) é o que deixa a barra de categorias grudar no topo ao rolar. */
.vp-destaques, .vp-cats, .vp-grupos, .vp-secao { box-sizing: border-box; width: 100%; }
.vp-destaques { padding: 14px 14px 0; }
.vp-sec-t { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--txt2); margin: 0 0 8px; }
.vp-dest-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vp-palco:not(.cel) .vp-dest-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vp-dest { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-radius: 12px; overflow: hidden; padding-bottom: 8px; color: var(--txt);
  box-shadow: 0 2px 10px rgba(30, 40, 70, .07); }
.vp-dest img, .vp-dest .vp-semfoto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; object-fit: cover; margin-bottom: 4px; }
.vp-dest-nome { font-size: 12px; font-weight: 700; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-dest-preco { font-size: 12px; font-weight: 800; color: var(--ink); padding: 0 8px; }
.vp-cats { display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px 4px; position: sticky; top: 0; z-index: 2;
  background: var(--bg); scrollbar-width: none; }
.vp-cats::-webkit-scrollbar { display: none; }
.vp-cats a, .vp-cats button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px; background: var(--surface); color: var(--ink); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.vp-cats button.on { background: var(--ink); color: var(--ink-on); }
.vp-secao { scroll-margin-top: 52px; }
.vp-secao .vp-sec-t { padding: 14px 14px 0; margin: 0; }
.vp-secao .vp-pecas { padding-top: 8px; }
.vp-cardapio .vp-destaques, .vp-cardapio .vp-cats, .vp-cardapio .vp-secao { max-width: 860px; margin-left: auto; margin-right: auto; }
.vp-bio .vp-destaques, .vp-bio .vp-secao { max-width: 560px; margin-left: auto; margin-right: auto; }
.vp-palco:not(.cel) .vp-bio .vp-destaques, .vp-palco:not(.cel) .vp-bio .vp-secao { max-width: 860px; }
.vp-bio .vp-secao .vp-sec-t { text-align: center; }
/* Boutique na loja pública (sem JS): o chip é link para a âncora e o :target esconde as outras seções. */
.vp-publica.vp-boutique .vp-grupos:has(.vp-secao:target) .vp-secao:not(:target) { display: none; }
.vp-publica.vp-boutique:not(:has(.vp-secao:target)) .vp-cats a[data-a="vp-todas"] { background: var(--ink); color: var(--ink-on); }
@media (min-width: 720px) { .vpub .vp-publica .vp-dest-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .vpub .vp-publica.vp-boutique .vp-destaques, .vpub .vp-publica.vp-boutique .vp-cats,
  .vpub .vp-publica.vp-boutique .vp-secao { max-width: 1080px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) { .vpub .vp-publica.vp-bio .vp-destaques, .vpub .vp-publica.vp-bio .vp-secao { max-width: 860px; } }
/* ── Vitrine F3: sacola. O formulário da peça nasce [hidden] e o sacola.js mostra; sem JS vale o botão do WhatsApp.
   Tudo com a paleta DERIVADA da loja (--ink/--soft/--surface), nunca com a cor crua do maker. */
/* [hidden] tem de vencer o display das classes: sem isto o formulário da sacola apareceria SEM JavaScript. */
.vp-loja [hidden] { display: none !important; }
.vp-add { display: grid; gap: 10px; margin-top: 14px; }
.vp-campo { display: grid; gap: 4px; font-size: 12.5px; color: var(--txt2); font-weight: 600; }
.vp-campo input, .vp-campo select, .vp-campo textarea { font: inherit; font-size: 14px; font-weight: 400; color: var(--txt);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 10px;
  padding: 9px 11px; width: 100%; box-sizing: border-box; }
.vp-campo input:focus, .vp-campo select:focus, .vp-campo textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.vp-qtd input { max-width: 110px; }
.vp-obrig { color: var(--ink); }
.vp-add .vp-cta { border: 0; cursor: pointer; font: inherit; font-weight: 700; width: 100%; margin-top: 4px; }
.vp-add-ok { font-size: 13px; color: #2e7d4f; font-weight: 600; text-align: center; }
.vp-add-ok a { color: var(--ink); }
.vp-sacola-flutua { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5;
  background: var(--ink); color: var(--ink-on); text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: 30px; box-shadow: 0 6px 20px rgba(30, 40, 70, .22); }
.vp-sacola-flutua b { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: 12px;
  background: var(--ink-on); color: var(--ink); text-align: center; }
.vp-sacola { width: 100%; max-width: 620px; margin: 0 auto; padding: 4px 16px 10px; box-sizing: border-box; }
.vp-sacola .vs-loja { margin-bottom: 12px; }
.vs-vazia { padding: 18px 0; color: var(--txt2); }
.vs-vazia a, .vs-link { color: var(--ink); font-weight: 600; }
.vs-itens { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.vs-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--surface); border-radius: 14px; padding: 8px 10px 8px 8px; box-shadow: 0 2px 10px rgba(30, 40, 70, .07); }
.vs-foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--soft); }
.vs-inicial { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--ink); }
.vs-info { min-width: 0; display: grid; gap: 2px; }
.vs-nome { font-weight: 700; color: var(--txt); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-esp { font-size: 12px; color: var(--txt2); overflow-wrap: anywhere; }
.vs-preco { font-size: 13px; font-weight: 700; color: var(--ink); }
.vs-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
.vs-q { width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.vs-q:disabled { opacity: .4; cursor: default; }
.vs-n { min-width: 16px; text-align: center; font-weight: 700; }
.vs-tirar { border: 0; background: none; color: var(--txt2); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px; }
.vs-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 2px 14px;
  font-size: 15px; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.vs-total b { font-size: 18px; color: var(--ink); }
.vs-form { display: grid; gap: 12px; }
.vs-receber { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.vs-receber legend { font-size: 12.5px; color: var(--txt2); font-weight: 600; margin-bottom: 4px; }
.vs-consent { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 13px; color: var(--txt2); line-height: 1.45; }
.vs-consent a { color: var(--ink); }
/* 🍯 honeypot: fora da tela (não display:none — robô ignora campo escondido por display). */
.vs-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vs-msg { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--soft); color: var(--txt); }
.vs-msg.erro { background: #fdecea; color: #8a1f17; }
.vs-msg ul { margin: 6px 0 0; padding-left: 18px; }
.vs-form .vp-cta { border: 0; cursor: pointer; font: inherit; font-weight: 700; width: 100%; }
.vs-form .vp-cta:disabled { opacity: .6; cursor: default; }
a.vs-contato { text-decoration: none; }
.vp-sucesso { text-align: center; padding-top: 28px; display: grid; gap: 10px; justify-items: center; }
.vp-sucesso p { margin: 0; color: var(--txt2); line-height: 1.5; }
.vp-sucesso .vp-cta { text-decoration: none; min-width: 240px; }
.vp-sucesso-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--ink-on);
  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; }
.vpub .vp-sacola-pag { padding-bottom: 72px; }
/* Pedidos (app do maker): selo e ações do pedido que chegou pela vitrine. */
.vit-aconf-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vit-aconf-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vit-aconf-acoes .btn { padding: 3px 9px; font-size: 11.5px; }
.vpub-404 { display: flex; align-items: center; justify-content: center; background: #f1f4f9; padding: 24px 16px; }
.vpub-404-card { background: #fff; border-radius: 18px; padding: 28px 22px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 10px 40px rgba(30, 40, 70, .10); }
.vpub-404-t { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.vpub-404-card p { color: #55607a; font-size: 13.5px; margin: 0 0 14px; }
.vpub-404-link { color: #3b669b; font-weight: 700; }
.vpub-404-marca { margin-top: 18px; font-size: 11.5px; color: #98a1b5; }

/* Fallback do ErrorBoundary do layout (spec-vigia-falhas E9) — a tela que quebrou, sem derrubar o app. */
.tela-falha { margin: 24px auto; max-width: 460px; }
.tela-falha .empty-x { margin-left: auto; margin-right: auto; }
.tela-falha-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.tela-falha-acoes .btn { text-decoration: none; }

/* ---- Pendências de cadastro de insumo (spec-insumos-cadastro-rapido) ---- */
.aviso-pend { display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 11px 14px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.aviso-pend .ic { font-size: 20px; color: var(--warning); }
.aviso-pend .t { flex: 1; font-size: 13px; }
.aviso-pend .t b { color: var(--warning); }
.aviso-pend .t small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 640px) { .aviso-pend { flex-wrap: wrap; } .aviso-pend .btn { width: 100%; } }
.pend-selo { display: inline-flex; gap: 4px; align-items: center; font: 600 10.5px var(--mono); color: var(--warning); white-space: nowrap;
  background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
  border-radius: 20px; padding: 1px 8px; cursor: help; }
.selo-rapido { font: 600 9.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 20px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.finalizar { border-radius: 11px; padding: 10px 12px; margin: 4px 0 14px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 7%, transparent); }
.finalizar > b { color: var(--warning); }
.finalizar ul { margin: 6px 0 0; padding: 0; list-style: none; }
.finalizar li { display: flex; gap: 7px; align-items: center; margin: 4px 0; }
.finalizar li.ok { color: var(--success); text-decoration: line-through; opacity: .8; }
.finalizar li .btn { margin-left: auto; padding: 3px 9px; font-size: 12px; }
.field.faltando select, .field.faltando input, .field.faltando .lopc-val { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); }
/* Campo de lista com "+ Criar" (ListaOpcaoCampo) */
.lopc { display: flex; gap: 8px; align-items: center; }
.lopc-pk { flex: 1; min-width: 0; }
.lopc-sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); flex: 0 0 auto; vertical-align: -3px; }
.lopc-mini { margin-top: 6px; border: 1px solid var(--border); border-radius: 9px; padding: 9px; background: var(--surface-2); }
.lopc-mini .l { font: 600 9.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.lopc-mini .ln { display: flex; gap: 6px; align-items: center; }
.lopc-mini .ln input[type=text] { flex: 1; }
.lopc-mini .ln input[type=color] { width: 44px; height: 34px; padding: 2px; flex: 0 0 auto; }
.lopc-mini .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.lopc-mini .acoes { display: flex; gap: 6px; margin-top: 8px; }
.field.faltando .picker input { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); }
/* Cadastro rápido de insumo (CadastroRapidoInsumo) */
.cri-pago { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cri-pago > input, .cri-pago .moeda { max-width: 130px; }
.cri-pago input.cri-falta { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); }
.cri-rolos { display: flex; gap: 5px; flex-wrap: wrap; }
.cri-rolos button { border: 1px solid var(--border); background: var(--canvas); color: var(--text); border-radius: 16px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.cri-rolos button.sel { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cri-vira { margin-top: 6px; font-size: 12.5px; display: flex; gap: 6px; align-items: baseline; }
.cri-vira b { font-family: var(--mono); color: var(--text-emph); }
/* "= R$ X/kg" embaixo da linha de compra (#268, CustoDaCompra): o preço do kg só aparece calculado. */
.cdc { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 12.5px; margin: -2px 0 8px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.cdc b { font-family: var(--mono); color: var(--text-emph); }
.cdc.wn { border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.cdc .cdc-av { color: var(--warning); flex-basis: 100%; }
.ppi-un-campo { position: relative; display: flex; align-items: center; }
.ppi-un-campo input { padding-right: 34px; }
.ppi-un-campo .u { position: absolute; right: 10px; color: var(--muted); font-family: var(--mono); font-size: 12px; pointer-events: none; }
/* PrecoPagoInput (#267): quantidade livre ao lado do valor pago + o unitário com 6 casas em texto menor. */
.cri-pago input.ppi-qtd { width: 90px; max-width: 90px; }
.ppi-unit { font: 500 11.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cri-nf .cri-pago input.ppi-qtd { width: 80px; flex: 0 0 80px; }
.cri-nf .ppi-un { color: var(--muted); }
.cri-nf .ppi-unit { margin: -2px 0 6px; }
/* Custo médio só leitura + "corrigir custo" no cadastro de insumo (#267). */
.custo-ro { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.custo-ro b { font-size: 17px; color: var(--text-emph); display: block; }
.corrigir-custo { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 4px 0 12px; background: var(--canvas); }
.custo-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.custo-cmp > div { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.custo-cmp span { display: block; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.custo-cmp b { overflow-wrap: anywhere; }
.custo-cmp .de b { color: var(--danger); }
.custo-cmp .para b { color: var(--success); }
.aviso-curva { margin: -4px 0 12px; }
.aviso-curva .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.aviso-curva .acoes .btn { flex: 0 0 auto; }
/* Seletor de insumo com busca (SeletorInsumo) */
.seli { position: relative; }
.seli-val { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; background: var(--canvas); color: var(--text-emph);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; min-height: 36px; cursor: pointer; font: inherit; }
.seli-val .seli-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seli-seta { margin-left: auto; color: var(--muted); }
.seli-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); }
.seli-sw.grande { width: 22px; height: 22px; border-radius: 6px; }
.seli-scrim { position: fixed; inset: 0; z-index: 60; }
.seli-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 61; min-width: 280px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.seli-pop > .search { width: 100%; margin-bottom: 6px; }
.seli-mats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.seli-mats button { border: 1px solid var(--border); background: var(--canvas); color: var(--text); border-radius: 14px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.seli-mats button.on { border-color: var(--accent); color: var(--accent); }
.seli-ops { max-height: 300px; overflow-y: auto; }
.seli-grupo { font: 600 9.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 8px 4px 4px; }
.seli-op { width: 100%; display: flex; gap: 9px; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 6px 8px; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.seli-op:hover, .seli-op.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.seli-op.sem { opacity: .6; }
.seli-txt { flex: 1; min-width: 0; }
.seli-txt small { display: block; color: var(--muted); font-size: 11.5px; }
.seli-tag { font: 600 9.5px var(--mono); color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; padding: 1px 6px; white-space: nowrap; }
.seli-vazio { color: var(--muted); font-size: 12.5px; padding: 6px 8px; }
.seli-todos { width: 100%; background: none; border: 1px dashed var(--border); color: var(--muted); border-radius: 8px; padding: 6px; margin-top: 6px; cursor: pointer; }
.seli-pe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* Entrada do fatiado — Foto · Print · Arquivo (EntradaFatiado) */
.entf-seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; margin: 0 0 10px; }
.entf-seg button { flex: 1; min-width: 0; background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 4px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.entf-seg button.on { background: var(--surface); color: var(--text-emph); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) inset; }
.entf .tag { white-space: nowrap; font: 600 8.5px var(--mono); letter-spacing: .5px; text-transform: uppercase; border-radius: 12px; padding: 0 5px; margin-left: 3px; border: 1px solid var(--border); vertical-align: 1px; }
.entf .tag.beta { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.entf .tag.breve { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); border-style: dashed; }
.entf .oque { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; margin: 0 0 12px; }
.entf .oque-t { font: 600 9.5px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.entf .oque-in { display: flex; gap: 11px; align-items: flex-start; }
.entf .oque ul { margin: 0; padding-left: 15px; font-size: 12px; color: var(--text); }
.entf .oque li { margin: 2px 0; } .entf .oque li b { color: var(--text-emph); }
.entf .oque li.nao { color: var(--muted); list-style: "✕  "; }
.entf .oque kbd { font: 10.5px var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--text-emph); background: var(--surface-2); }
.entf .vantagem { margin-top: 9px; font-size: 12px; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border-radius: 8px; padding: 6px 9px; }
.entf .mini-fat { flex: none; width: 132px; background: #3a3f47; border-radius: 7px; padding: 6px 7px; font-size: 10px; color: #e9e9e9; border: 2px solid var(--accent); }
.entf .mini-fat.crop { outline: 2px dashed #fff; outline-offset: 3px; }
.entf .mini-fat .mf-h { font-weight: 700; margin-bottom: 3px; }
.entf .mini-fat .mf-l { display: flex; justify-content: space-between; gap: 6px; }
.entf .mini-fat .mf-l i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.entf .mini-fat .mf-l.tot { border-top: 1px solid rgba(255,255,255,.2); margin-top: 2px; padding-top: 2px; }
.entf .mini-arq { flex: none; width: 110px; text-align: center; background: var(--surface-2); border-radius: 8px; padding: 8px 6px; font-size: 11px; }
.entf .mini-arq .ic { font-size: 26px; } .entf .mini-arq span { display: block; color: var(--success); font-size: 10.5px; }
.big { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-emph); font-size: 15px; font-weight: 700; margin-bottom: 9px; cursor: pointer; text-align: left; }
.big small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.big .ic { font-size: 24px; }
.big.acc { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.big.acc small { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.big:disabled { opacity: .5; cursor: not-allowed; }
/* A saída alternativa abaixo do botão principal (Preço rápido: "abrir calculadora completa"): mesmo formato, contornada. */
.entf-alt .ou { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.entf-alt .ou::before, .entf-alt .ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.big.alt { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1.5px solid var(--accent); color: var(--accent);
  margin-top: 10px; text-decoration: none; }
.big.alt:hover, .big.alt:focus-visible { background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* O ImportFatiado como botão grande (modo leitura do Preço rápido): mesma área de soltar, outro desenho. */
.inline-novo.imp-botao { background: none; border: 0; padding: 0; margin-top: 0; }
.imp-botao .dropzone { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 13px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.imp-botao .dropzone:hover, .imp-botao .dropzone:focus-visible, .imp-botao .dropzone.sobre { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.imp-botao .dropzone .ic { font-size: 24px; }
.imp-botao .dropzone .dz-t { font-size: 15px; font-weight: 700; color: var(--on-accent); }
.imp-botao .dropzone .dz-t small { display: block; font-size: 11.5px; font-weight: 400; color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.seli-pop.embutido { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0; background: none; }
.seli-pop.embutido .seli-ops { max-height: none; }

/* ---- Preço rápido (spec-preco-rapido): o layout A de docs/features/preco-rapido/prototipo-calculadora-rapida.html, com os tokens do
   tema (o laranja do protótipo é o --accent daqui). Mobile-first; no desktop, coluna central de até 520px. ---- */
/* overflow-anchor: sem isso o Chrome compensa o scrollTop quando o topo encolhe, e o topo pisca (ver preco-rapido.js). */
.pr { max-width: 520px; margin: 0 auto; overflow-anchor: none; }
/* Cabeçalho fixo: nome + resumo, cartão do preço e a faixa de ajustes grudada logo abaixo — uma peça só. */
/* Cobre o gutter do .content (#288): top/margem negativos + o mesmo valor somado ao padding-top — a fresta acima
   do cartão some e o conteúdo fica onde estava. */
.pr-cab { position: sticky; top: calc(-1 * var(--content-pad)); z-index: 20;
  margin: calc(-1 * var(--content-pad)) 0 10px; padding: calc(6px + var(--content-pad)) 14px 0; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--canvas)); border-bottom: 1px solid var(--border); }
@media (max-width: 640px) { .pr-cab { margin: calc(-1 * var(--content-pad)) calc(-1 * var(--content-pad)) 10px; border-radius: 0; } }
.pr-linha1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.pr-linha1 b { color: var(--text-emph); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-linha1 span { flex: none; }
.pr-preco { margin: 6px 0 10px; border-radius: 14px; padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pr-rot { display: flex; justify-content: space-between; gap: 8px; font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.pr-v { font: 800 34px var(--mono); color: var(--accent); letter-spacing: -1px; line-height: 1.1; margin-top: 2px; }
.pr-v small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.pr-kp { display: flex; gap: 6px; margin-top: 7px; }
.pr-kp > div { flex: 1; min-width: 0; background: rgba(0, 0, 0, .18); border-radius: 8px; padding: 4px 7px; }
.pr-kp span { display: block; font: 600 9px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.pr-kp b { font: 700 13px var(--mono); color: var(--text-emph); }
.pr-preco.vazio { border-style: dashed; border-color: var(--border); background: var(--surface-2); }
.pr-preco.vazio .pr-rot { color: var(--muted); }
.pr-preco.vazio .pr-v { color: var(--muted); font-size: 20px; letter-spacing: 0; padding: 6px 0; }
.pr-preco.vazio .pr-v small { display: block; font: 500 12px var(--sans); margin: 3px 0 0; }
.pr-preco.seu { border-color: color-mix(in srgb, var(--success) 50%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
.pr-preco.seu .pr-rot, .pr-preco.seu .pr-v { color: var(--success); }
.pr-preco.seu.baixo { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.pr-preco.seu.baixo .pr-rot, .pr-preco.seu.baixo .pr-v { color: var(--danger); }
/* Faixa de ajustes (chips em pílula, rolagem lateral, esmaecida na borda direita). */
.pr-chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 9px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.pr-chips::-webkit-scrollbar { display: none; }
.pr-chip, .btn.pr-chip { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 20px; min-height: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.pr-chip .i { font-size: 13px; line-height: 1.2; }
.pr-chip b { font: 700 11px var(--mono); color: var(--text-emph); }
.pr-chip.on { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pr-chip.on b { color: var(--accent); }
/* Topo compacto ao rolar: o preço continua visível numa linha; nome e KPIs somem, a faixa de ajustes fica. */
.pr-cab.compacto .pr-linha1, .pr-cab.compacto .pr-kp { display: none; }
.pr-cab.compacto .pr-preco { padding: 6px 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pr-cab.compacto .pr-rot { flex-direction: column; font-size: 9px; }
.pr-cab.compacto .pr-v { font-size: 22px; margin: 0; }

/* Corpo */
.pr-fonte { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; }
.pr-fonte b { color: var(--text-emph); font-family: var(--mono); }
.pr-trocar { margin-left: auto; background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 12.5px; cursor: pointer; padding: 2px; }
.pr-sec { display: flex; justify-content: space-between; font: 600 10px var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); margin: 12px 2px 6px; }
.pr-fil { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; text-align: left; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 9px 10px; margin-bottom: 6px; color: var(--text); cursor: pointer; }
.pr-fil > span { min-width: 0; }
.pr-sw { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); flex: none; }
.pr-sw .lida { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); }
.pr-sw.mini { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 6px; }
.pr-fil .n { display: block; font-size: 13.5px; color: var(--text-emph); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-fil .d { display: block; font: 11px var(--mono); color: var(--muted); }
.pr-fil .r { text-align: right; font: 700 13px var(--mono); color: var(--text-emph); }
.pr-fil .r small { display: block; font: 500 10px var(--mono); color: var(--muted); }
.pr-fil .acc { color: var(--accent); }
.pr-fil.pend { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.pr-fil.pend .n { color: var(--accent); }
.pr-pendcad { display: block; font-size: 12px; color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 10px; padding: 8px 10px; margin: 4px 0 6px; }
.pr-pendcad b, .pr-pendcad u { color: var(--accent); }
.pr-extra { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; }
.pr-extra b { font-family: var(--mono); color: var(--text-emph); }
.pr-extra .link { font-size: 11.5px; padding: 0 0 0 6px; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pr-acord { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; margin-top: 10px; }
.pr-acord summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 13px; color: var(--text-emph); display: flex; justify-content: space-between; }
.pr-acord summary::-webkit-details-marker { display: none; }
.pr-acord .seta { transition: transform .15s; }
.pr-acord[open] summary .seta { transform: rotate(90deg); }
.pr-acord .in { padding: 0 12px 10px; }
.pr-acord .lin { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.pr-acord .lin b { font-family: var(--mono); color: var(--text); font-weight: 500; text-align: right; }
.pr-acord .lin b small { display: block; font-size: 10.5px; color: var(--muted); }
.pr-acord .lin.t { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; color: var(--text-emph); }
.pr-acord .lin.t b { color: var(--text-emph); font-weight: 700; }
.pr .tag { font: 600 9px var(--mono); letter-spacing: .8px; text-transform: uppercase; border-radius: 20px; padding: 1px 7px;
  border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.pr-trava { font-size: 12px; color: var(--muted); border-left: 3px solid var(--accent); padding: 5px 9px; margin: 12px 0 0; }
.pr-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 18px; }
.pr-acoes > button, .pr-acoes > .btn, .pr-acoes > a { padding: 11px 6px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-emph); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; min-height: 0; }
.pr-acoes > button.p { grid-column: 1 / 3; background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-size: 14px; }
.pr-acoes > button:disabled, .pr-acoes > .btn:disabled { opacity: .45; cursor: not-allowed; }
.pr-sheet .pr-acoes { margin: 6px 0 0; }
/* Estado vazio: a entrada */
.pr-entrada h2 { font-size: 17px; color: var(--text-emph); margin: 14px 2px 2px; }
.pr-entrada > p { font-size: 12.5px; color: var(--muted); margin: 0 2px 12px; }
.pr-entrada > .link { font-size: 12.5px; color: var(--muted); }

/* Gavetas (bottom sheet) */
.pr-veu { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 45; animation: m1-scrim-in .15s ease-out; }
.pr-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; max-height: 86vh; overflow-y: auto; background: var(--surface);
  border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: m1-sheet-up .22s ease; }
@media (min-width: 641px) { .pr-sheet { left: calc(50% - 260px); right: auto; width: 520px; } }
.pr-sheet .alca { width: 40px; height: 4px; border-radius: 3px; background: var(--border); margin: 0 auto 10px; }
.pr-sheet h4 { margin: 0 0 3px; font-size: 15px; color: var(--text-emph); }
.pr-sheet h4 .dist { font: 500 11px var(--mono); color: var(--muted); margin-left: 6px; }
.pr-sheet > p { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.pr-passo { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 12px; }
.pr-passo button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-emph); font-size: 22px; cursor: pointer; }
.pr-passo .v { font: 800 30px var(--mono); color: var(--text-emph); min-width: 110px; text-align: center; }
.pr-presets, .cri-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pr-presets button, .cri-presets button { background: var(--canvas); border: 1px solid var(--border); color: var(--text); border-radius: 20px;
  font: 12.5px var(--mono); padding: 6px 12px; cursor: pointer; }
.pr-presets button.sel, .cri-presets button.sel { border-color: var(--accent); color: var(--accent); }
.pr-campo, input.pr-campo { width: 100%; background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; color: var(--text-emph);
  font: 700 24px var(--mono); padding: 10px 12px; text-align: center; }
.pr-ok, .btn.pr-ok { width: 100%; padding: 12px; border-radius: 12px; border: 0; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 4px; min-height: 0; }
.pr-ok:disabled { opacity: .45; cursor: not-allowed; }
.pr-sec2 { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: 13px; cursor: pointer; margin-top: 6px; }
.pr-opc { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 6px; text-align: left; font: inherit;
  font-size: 13px; background: none; border: 0; border-bottom: 1px dashed var(--border); color: var(--text); cursor: pointer; }
.pr-opc .dist { font: 10.5px var(--mono); color: var(--muted); }
.pr-opc b { font-family: var(--mono); }
.pr-opc.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.pr-texto { background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 14px; margin-bottom: 8px; }
.pr-vazio { font-size: 12.5px; color: var(--muted); padding: 12px 4px; }
/* O seletor de filamento dentro da gaveta: busca com lupa, lista aberta, "criar" com o acento. */
.seli-busca { position: relative; margin: 2px 0 8px; }
.seli-busca input { width: 100%; background: var(--canvas); border: 1px solid var(--border); border-radius: 11px; color: var(--text-emph);
  font-size: 15px; padding: 10px 12px 10px 36px; }
.seli-busca .lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .7; pointer-events: none; }
.seli-pop:not(.embutido) .seli-busca input { font-size: 13px; padding: 7px 10px 7px 32px; }
.seli-criar { background: none; border: 0; color: var(--accent); font-size: 12.5px; cursor: pointer; padding: 8px 2px; text-decoration: underline; }
.pr-sheet .seli-ops { max-height: 330px; overflow-y: auto; }
/* "Novo filamento" dentro da gaveta (cadastro rápido, desenho do celular). */
.cri-nf .voltar { background: none; border: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 0 0 6px; }
.cri-nf h4 { margin: 0 0 3px; font-size: 15px; color: var(--text-emph); }
.cri-nf > p { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.cri-nf > label { display: block; font: 600 9.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 9px 0 4px; }
.cri-nf > label .norm { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cri-nf .cri-presets { margin-bottom: 4px; }
.cri-nf input[type=text], .cri-nf .cri-pago input { width: 100%; background: var(--canvas); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-emph); font-size: 15px; padding: 9px 11px; }
.cri-corlin { display: flex; gap: 8px; align-items: center; }
.cri-corlin input[type=color] { width: 46px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); padding: 3px; flex: none; }
.cri-nf .cri-outra { margin-top: 2px; }
.cri-nf .cri-pago { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: nowrap; margin-bottom: 6px; }
.cri-nf .cri-pago input { width: 110px; max-width: 110px; font: 700 17px var(--mono); text-align: right; }
.cri-nf .cri-pago input.cri-falta { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
.cri-kg { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; border-radius: 10px; padding: 8px 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.cri-kg b { font: 800 18px var(--mono); color: var(--accent); }
.cri-nome { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cri-nome input { margin-top: 4px; font-size: 14px !important; }
.cri-nota { font-size: 11.5px; color: var(--muted); border-left: 3px solid var(--border); padding: 5px 9px; margin: 10px 0 8px; }
/* Pé da entrada do Preço rápido: os três links no mesmo tom discreto (o de ajuda do import vem do componente). */
.pr-entrada .link, .pr-entrada .link-ajuda { color: var(--muted); text-decoration: underline; font-size: 12.5px; }
.pr-entrada > .link { display: inline-block; margin-top: 6px; }

/* ── Recurso em teste (piloto monitorado): selo genérico ─────────────────────────────────────────────── */
.selo-teste { display: inline-block; white-space: nowrap; font: 600 9px var(--mono); letter-spacing: .6px; text-transform: uppercase;
  color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 45%, transparent); border-radius: 12px; padding: 0 6px;
  margin-left: 4px; vertical-align: 1px; cursor: help; }

/* ── Leitura por imagem (#160): conferência obrigatória ──────────────────────────────────────────────────── */
.pr-conf { border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.pr-conf-l { display: grid; grid-template-columns: 14px minmax(0, 1fr) 96px 12px; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.pr-conf-l input { width: 96px; text-align: right; }
.pr-conf-l .u { color: var(--muted); font-size: 12px; }
.pr-conf-l small { display: block; color: var(--muted); font-size: 11px; }
.pr-conf-l.branco input { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.pr-conf-l.branco small { color: var(--warning); }
input.g-img.branco { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.leitura-recusa { border-left: 3px solid var(--warning); }
/* Lendo uma imagem (#160): a área não apaga (o .lendo genérico põe opacidade) — é o estado principal da tela. */
.dropzone.lendo.img { opacity: 1; cursor: progress; }
.dropzone.lendo.img .spin.lg { color: var(--on-accent); flex: none; }
.inline-novo:not(.imp-botao) .dropzone.lendo.img .spin.lg { color: var(--accent); }
.leitura-bar { margin-top: 6px; }
/* Recusa com orientação (#160): as boas práticas no modal. */
.dicas-leitura { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.dicas-leitura ul { margin: 6px 0 0; padding-left: 18px; }
.dicas-leitura li { margin: 3px 0; }
/* Consentimento das amostras de treinamento (#160). */
.leitura-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; cursor: pointer; }
.leitura-consent input { margin-top: 2px; flex: none; }
.leitura-consent.travado { cursor: default; }
.leitura-consent small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.leitura-bar i { transition: width .4s ease; }
/* Nome longo sem espaço (arquivo da câmera) alargava a página inteira: nada no Preço rápido passa da largura. */
/* Sem .pr-cab aqui: no celular ela sangra -7px dos DOIS lados (margem negativa); max-width 100% a encurtava e ela parava
   antes da borda direita — o degrau visto no teste de 01/10. */
.pr, .pr-linha1 { min-width: 0; max-width: 100%; }
.pr-linha1 b { flex: 1 1 auto; }
.pr-conf-l .pr-sw { width: 14px; height: 14px; }

/* ---------- Seletor de impressora do catálogo (#259, onboarding guiado) ---------- */
.seletor-imp .si-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-top: 10px; max-height: 300px; overflow-y: auto; padding: 2px; }
.si-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--sans); font-size: 12.5px; }
.si-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.si-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.si-card b { color: var(--text-emph); font-size: 13px; }
.si-card .si-m { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.si-card .si-w { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.si-card.si-outra { border-style: dashed; }
.si-outraform { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.si-outraform .si-outra-t { font-weight: 600; color: var(--text-emph); font-size: 12.5px; margin-bottom: 8px; }
.si-escolhido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 12px; }
.si-escolhido b { color: var(--text-emph); }
.maq-compra { border: 1px solid var(--border); border-radius: 10px; padding: 12px 12px 2px; margin: 4px 0 14px; }
.maq-compra .maq-compra-t { font-weight: 600; color: var(--text-emph); font-size: 12.5px; margin-bottom: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .seletor-imp .si-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tarifa-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 11.5px; }
.tarifa-sug select { width: auto; padding: 3px 6px; font-size: 11.5px; }

/* ---------- Montar a bancada (#259, Parte 2): assistente, etapas, card da Home e "+ Adicionar" ---------- */
.mtr .tag, .mtr-drawer .tag, .mcard .tag, .si-escolhido .tag, .maq-compra .tag { font: 600 9.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px; color: var(--muted); vertical-align: 2px; }
.mtr { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.mtr-rail { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mtr-rail-h { font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 2px 8px 8px; }
.mtr-rstep { display: flex; gap: 10px; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px; color: var(--text); cursor: pointer; font: 500 13px var(--sans); }
.mtr-rstep small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.mtr-rstep .dot { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); font: 600 11px var(--mono); color: var(--muted); }
.mtr-rstep.cur { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--text-emph); }
.mtr-rstep.cur .dot { border-color: var(--accent); color: var(--accent); }
.mtr-rstep.done .dot { background: var(--success); border-color: var(--success); color: var(--canvas); }
.mtr-rstep.skip .dot { border-style: dashed; }
.mtr-rstep:focus-visible, .ms:focus-visible { outline: 2px solid var(--help); outline-offset: 2px; }
.mtr-tempo { margin-top: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.mtr-barra { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.mtr-barra i { display: block; height: 100%; }
.mtr-corpo { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mtr-corpo h2 { margin: 0; font-size: 22px; color: var(--text-emph); text-wrap: balance; }
.mtr-topo { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.mtr-lead { margin: 0; color: var(--muted); max-width: 68ch; line-height: 1.55; }
.mtr-lbl { font: 600 10.5px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mtr-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mtr-pe { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.mtr-pular { background: none; border: none; font-size: 13px; }
.mtr-grid2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mtr-campos { display: flex; flex-direction: column; gap: 18px; }
.mtr-campos input[type=range] { width: 100%; accent-color: var(--accent); }
.mtr-imp { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.mtr-imp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mtr-imp-h b { color: var(--text-emph); }
.mtr-imp-h .x { margin-left: 4px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.mtr-qty { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; font: 600 12px var(--mono); }
.mtr-qty button { background: none; border: none; color: var(--text); cursor: pointer; padding: 3px 9px; font-size: 14px; }
.mtr-qty span { padding: 0 6px; min-width: 18px; text-align: center; }
.mtr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mtr-facts div { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.mtr-facts b { color: var(--text-emph); font-family: var(--mono); font-size: 12.5px; }
.mtr-linhas { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; }
.mtr-linhas > div { display: flex; justify-content: space-between; gap: 10px; }
.mtr-linhas b { color: var(--text-emph); }
.mtr-big { font-size: 30px; font-weight: 700; color: var(--text-emph); line-height: 1.1; }
.mtr-sug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; font-size: 12.5px; }
.mtr-sug .btn { padding: 4px 12px; }
.mtr-planilha { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; }
.mtr-upload { position: relative; overflow: hidden; padding: 5px 12px; cursor: pointer; }
.mtr-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mtr-grade { border: 1px solid var(--border); border-radius: 10px; padding: 8px; overflow-x: auto; }
.mtr-grade:focus-visible { outline: 2px solid var(--help); }
.mtr-grade table { width: 100%; min-width: 560px; border-collapse: collapse; }
.mtr-grade th { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 4px 6px; }
.mtr-grade th.r, .mtr-grade td.r { text-align: right; }
.mtr-grade td { padding: 3px 4px; }
.mtr-grade input, .mtr-grade select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; color: var(--text); font: 13px var(--sans); }
.mtr-grade td.r input { text-align: right; font-family: var(--mono); }
.mtr-grade td.pend input { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.mtr-grade td.mtr-kg { font-family: var(--mono); font-size: 12.5px; color: var(--text-emph); white-space: nowrap; padding-right: 8px; }
.mtr-grade td.mtr-kg.al { color: var(--warning); }
.mtr-x { background: none; border: none; color: var(--muted); cursor: pointer; }
.mtr-aviso td { font-size: 11.5px; color: var(--warning); padding: 0 6px 6px; }
.mtr-rodape-grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; margin-top: 8px; align-items: center; }
.mtr-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-top: 8px; }
.mtr-legenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 6px; }
.mtr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mtr-feitas { display: flex; flex-direction: column; gap: 8px; }
.mtr-feita { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.mtr-feita > span:first-child { font-weight: 700; width: 18px; text-align: center; }
.mtr-feita .ok { color: var(--success); }
.mtr-feita .wn { color: var(--warning); }
.mtr-feita b { color: var(--text-emph); }
.mtr-proximos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mtr-proximo { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; background: var(--surface); }
.mtr-proximo:hover { border-color: var(--accent); }
.mtr-proximo b { color: var(--text-emph); }
.mtr-proximo span { font-size: 12px; color: var(--muted); }
.drawer.mtr-drawer { width: 860px; }
.mcard { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.mcard-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mcard-h h3 { margin: 0; font-size: 16px; color: var(--text-emph); }
.mcard-h .link { background: none; border: none; font-size: 12.5px; }
.mcard-barra { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mcard-barra i { display: block; height: 100%; background: var(--accent); }
.mcard-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mcard .ms { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: none; color: var(--text); cursor: pointer; font: 12.5px var(--sans); }
.mcard .ms b { color: var(--text-emph); }
.mcard .ms span { font-size: 11px; }
.mcard .ms.ok { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); cursor: default; }
.mcard .ms.ok b { color: var(--success); }
.mcard .ms.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mcard-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.mpend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; font-size: 12.5px; }
.addmenu { position: relative; margin-right: 8px; }
.addmenu-scrim { position: fixed; inset: 0; z-index: 54; }
.addmenu-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 55; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.addmenu-lista a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.addmenu-lista a:hover, .addmenu-lista a:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.addmenu-lista a b { color: var(--text-emph); font-size: 13px; }
.addmenu-lista a span { color: var(--muted); font-size: 11.5px; }
.addmenu-lista hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.nav.nav-montar { color: var(--accent); font-weight: 600; min-width: 0; gap: 8px; padding-right: 6px; }
.nav.nav-montar .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; letter-spacing: -.1px; }
.nav-montar-n { flex: none; margin-left: auto; padding: 1px 5px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-family: var(--mono); font-size: 9.5px; }
html[data-menu="mini"] .side .nav-montar-n { display: none; }
.mcard .ms.opc { border-style: dashed; }
@media (max-width: 900px) {
  .mtr { grid-template-columns: 1fr; }
  .mtr-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .mtr-rail-h, .mtr-tempo { width: 100%; }
  .mtr-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mcard-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtr-proximos, .mtr-kpis { grid-template-columns: 1fr; }
  .mtr-facts { grid-template-columns: 1fr 1fr; }
  .addmenu .btn { padding: 6px 10px; }
}

/* ---- Viabilidade (spec-viabilidade D16–D20; protótipo docs/features/viabilidade/prototipo-viabilidade-painel.html) ----
   Painel POR CIMA da origem: tela cheia no celular (z 49 — acima da tab bar (30) e do microfone do assistente (31/47);
   abaixo dos toasts (60) e dos diálogos (55)); gaveta de 460px que EMPURRA a página no desktop — o :has() dá a margem
   ao .main sem JS, e a origem segue visível e editável (sem scrim). */
.vb-botao { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1.5px solid var(--accent); color: var(--accent);
  font-weight: 700; white-space: nowrap; }
.vb-botao:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.vb-botao.on { background: var(--accent); color: var(--on-accent); }
.vb-botao.apagado { opacity: .45; cursor: not-allowed; }
.vb-botao .vb-sm { display: none; }
@media (max-width: 640px) { .vb-botao .vb-lg { display: none; } .vb-botao .vb-sm { display: inline; } }

.vb-painel { position: fixed; inset: 0; z-index: 49; background: var(--canvas); display: flex; flex-direction: column; outline: none; }
.vb-painel[hidden] { display: none; }
@media (min-width: 861px) {
  .vb-painel { left: auto; width: 460px; border-left: 1px solid var(--border); box-shadow: -12px 0 30px rgba(0,0,0,.35); }
  .app:has(.vb-painel.aberto) .main { margin-right: 460px; }
}
.vb-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.vb-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-emph);
  font-size: 16px; cursor: pointer; flex: none; }
.vb-tt { flex: 1; min-width: 0; }
.vb-tt b { display: block; color: var(--text-emph); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-tt span { font-size: 12px; color: var(--muted); }
.vb-corpo { flex: 1; overflow: auto; padding: 12px 14px 20px; }
.vb-faixa { font-size: 12.5px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; color: var(--text); }
.vb-faixa-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vb-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.vb-ask label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.vb-ask input { width: 100%; font-family: var(--mono); font-size: 16px; }
.vb-seg { grid-column: span 2; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.vb-seg button { flex: 1; border: 0; background: none; color: var(--muted); padding: 8px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.vb-seg button.on { background: var(--surface-2); color: var(--text-emph); font-weight: 700; }
.vb-parque { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; font: inherit; font-size: 12px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; margin-bottom: 12px; cursor: pointer; text-align: left; }
.vb-parque b { color: var(--text); font-weight: 600; }
.vb-parque-det { font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: -6px 0 12px; }
.vb-abas { position: sticky; top: -12px; z-index: 2; background: var(--canvas); display: flex; gap: 6px; padding: 8px 0 10px; }
.vb-abas button { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 9px 6px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vb-abas button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vb-frases { list-style: none; margin: 0 0 10px; padding: 0; }
.vb-frases li { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px; }
.vb-frases li.neg { border-left-color: var(--danger); }
.vb-frases li.info { border-left-color: var(--muted); color: var(--muted); }
.vb-frases b { color: var(--text-emph); }
.vb-acao { margin-top: 6px; font: inherit; font-size: 12px; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 10px; cursor: pointer; }
.vb-aviso { font-size: 12px; color: var(--warning); margin: -4px 0 8px; }
.vb-kp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vb-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.vb-cell .l { font-size: 11px; color: var(--muted); }
.vb-cell .v { font-family: var(--mono); font-size: 16px; color: var(--text-emph); }
.vb-cell .v.neg, .vb-tab td.neg { color: var(--danger); }
.vb-det { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.vb-det summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.vb-tab { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.vb-tab td, .vb-tab th { padding: 5px 2px; border-bottom: 1px solid var(--border); text-align: left; }
.vb-tab th { color: var(--muted); font-weight: 500; }
.vb-tab .n { font-family: var(--mono); text-align: right; }
.vb-lock { text-align: center; padding: 22px 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }
.vb-lock b { color: var(--text-emph); display: block; margin-bottom: 6px; }
.vb-lock ul { text-align: left; font-size: 13px; color: var(--muted); margin: 10px 0 14px; padding-left: 18px; }
.vb-falta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px; }
.vb-falta b { color: var(--text-emph); }
.vb-rodape { display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--canvas); }
.vb-rodape > .btn { flex: 1; }
.vb-rodape > :last-child { flex: 2; }
/* Editor sobreposto (orçamento): o painel mora DENTRO do .editor (z 53) e, no desktop, o editor encolhe à esquerda
   para a gaveta — o mesmo "empurra" do .main, sem cobrir o formulário. */
@media (min-width: 861px) { .editor.sobreposto:has(.vb-painel.aberto) { right: 460px; } }
/* Página /viabilidade: premissas só leitura, valor de leitura e o preço vazio em destaque (não calcula com zero). */
.vb-premissas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 8px; }
.vb-premissas > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 7px 9px; }
.vb-premissas span { color: var(--muted); }
.vb-premissas b { color: var(--text-emph); font-family: var(--mono); font-weight: 600; }
.v-leitura { font-family: var(--mono); padding: 8px 0; color: var(--text-emph); }
.vb-falta-preco { border-color: var(--accent) !important; }
.vb-pagina-lentes .vb-abas { top: 0; background: var(--surface); }
/* Histórico e comparação da Viabilidade. */
.vb-data { font-family: var(--mono); color: var(--accent); }
.vb-hist-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.vb-hist .n { text-align: right; font-family: var(--mono); }
.vb-hist tr.on td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.vb-hist .vb-veredito { font-size: 12.5px; color: var(--muted); max-width: 360px; }
.vb-hist-btns { white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.vb-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vb-comparar .vb-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 640px) { .vb-comparar { grid-template-columns: 1fr; } }
.vb-hist-wrap { overflow-x: auto; }
.vb-hist td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
/* O Dialogo é genérico (440px): a comparação pede largura e rolagem própria — :has() evita mexer no componente. */
.dialog:has(.vb-comparar) { width: 780px; max-height: 90vh; overflow-y: auto; }
/* "Ver a conta" da Viabilidade (#282): a conta por extenso debaixo de cada frase, fechada por padrão. */
.vb-conta { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.vb-conta > summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.vb-conta-tab { overflow-x: auto; }
.vb-linhas { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; font-size: 12.5px; margin-top: 6px; }
.vb-linhas > span:nth-child(3n+1) { color: var(--muted); }
.vb-linhas > span:nth-child(3n+2) { font-family: var(--mono); color: var(--text); }
.vb-linhas > b { font-family: var(--mono); color: var(--text-emph); text-align: right; white-space: nowrap; }
.vb-leitura { font-size: 12.5px; margin-top: 6px; color: var(--text); }
.vb-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.vb-tab tr.vb-gargalo td { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.vb-trava { margin-left: 6px; font-size: 10px; text-transform: uppercase; color: var(--danger); border: 1px solid var(--danger); border-radius: 999px; padding: 0 5px; }
.vb-tab tr.vb-sem-insumo td { color: var(--muted); font-style: italic; }
.vb-conta .vb-tab { font-size: 12px; }
.vb-conta .vb-tab .n, .vb-conta .vb-tab th { white-space: nowrap; }
@media (max-width: 640px) {
  .vb-linhas { grid-template-columns: 1fr auto; gap: 2px 8px; }
  .vb-linhas > span:nth-child(3n+1) { grid-column: 1 / -1; margin-top: 6px; }
}

/* #294 — Calculadora: renomear pela barra e o painel Preço com o campo único do alvo. */
.te-renomear { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.te-renomear:hover, .te-renomear:focus-visible { color: var(--text-emph); background: var(--surface-2); }
.calc-preco .opcional { text-transform: none; letter-spacing: 0; }
.calc-preco .campo-alvo .link { cursor: pointer; }