/* ==========================================================================
   Orkai — casco do painel
   --------------------------------------------------------------------------
   Tokens e componentes copiados do panel.css do Skrap, para os dois produtos
   parecerem da mesma casa. Daqui para frente seguem vidas separadas.
   A folha do orçamento está em papel.css e não depende de nada daqui.
   ========================================================================== */

:root {
  --bg: #f4f6fb; --panel: #ffffff; --ink: #0f172a; --ink-2: #475569; --muted: #94a3b8;
  --line: #c9d3e1; --line-2: #dde5f0;
  /* borda de controle: input, select, botão. Separada de --line porque
     --line também pinta fundo em alguns lugares, e escurecer os dois
     junto sujaria o painel inteiro. */
  --borda: #aebdd1; --borda-forte: #93a6c0; --brand: #1d4ed8; --brand-2: #2563eb; --brand-soft: #e7eefc;
  --green: #10b981; --green-soft: #e7f8f1; --blue: #2563eb; --blue-soft: #e8f0fe;
  --amber: #f59e0b; --amber-soft: #fef3c7; --danger: #ef4444; --danger-soft: #fdecec;
  --sidebar: #0b1220; --sidebar-2: #131c30;
  /* cor de ação: o mesmo azul do menu lateral, não mais o roxo */
  --acao: #1d4ed8; --acao-2: #2563eb; --acao-ring: rgba(37,99,235,.28);
  /* o laranja é da própria marca (#ED6D02 no SVG). Aparece em dois lugares
     só: o + de criar e o avatar do usuário. Restrição é o que faz destaque. */
  --laranja: #ed6d02; --laranja-2: #ffc600;
  --radius: 14px; --radius-sm: 10px;
  --field-bg: #ffffff;
  /* escala única de alturas — nada fora disto */
  --h: 38px;        /* controle padrão: input, select, botão */
  --h-sm: 32px;     /* botão pequeno, chip */
  --gut: 24px;      /* goteira: topbar, form e cards alinham por ela */
}
body.dark {
  --borda: #33405e; --borda-forte: #445576;
  --brand: #3b82f6; --brand-2: #60a5fa; --acao: #1d4ed8; --acao-2: #2563eb;
  --acao-ring: rgba(59,130,246,.35);
  --bg: #0b1120; --panel: #131c31; --ink: #e6edf7; --ink-2: #9fb0cc; --muted: #6b7a96;
  --line: #26314a; --line-2: #1c2740; --brand-soft: #1f2547; --green-soft: #10241f;
  --blue-soft: #12203f; --danger-soft: #2a1620; --amber-soft: #2a2110;
  --sidebar: #070c17; --sidebar-2: #0d1526; --field-bg: #0e1728;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
  -webkit-font-smoothing: antialiased; transition: background .2s, color .2s;
}
/* ---------- layout ---------- */
/* `minmax(0, 1fr)` e não `1fr` — a correção de RAIZ do estouro lateral.
   -------------------------------------------------------------------------
   Coluna de grade declarada como `1fr` nasce com `min-width: auto`, o que quer
   dizer "nunca menor que o conteúdo". Basta um filho largo — a folha A4 de
   794px, uma tabela, um selo com mensagem de erro — para a coluna crescer e
   levar a página inteira junto, e o `overflow: auto` de quem deveria conter
   aquilo deixa de ter qualquer efeito. Media-se 1.306px de rolagem numa tela
   de 1.024. Com o mínimo em zero o conteúdo volta a caber, e o overflow de
   quem tem de rolar (o palco do papel) volta a funcionar. Não muda nada em
   tela larga: lá o conteúdo já cabia. */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100vh; overflow: hidden; transition: grid-template-columns .2s; }
body.recolhido .app { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar {
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: #cbd5e1; display: flex; flex-direction: column;
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;

  /* O z-index NÃO é enfeite. `position: sticky` sozinho não cria contexto de
     empilhamento: sem ele, o menu do usuário (que sai por cima do conteúdo)
     ficava ATRÁS dos campos do formulário, porque eles vêm depois no HTML.
     60 fica acima da barra do topo (30) e abaixo de modal (300) e aviso (200). */
  z-index: 60;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 20px; }
/* a marca é a arte, não texto ao lado dela */
.brand { text-decoration: none; }
.brand-mark  { width: 38px; height: 41px; object-fit: contain; flex: none; display: none; }
.brand-cheia { height: 47px; width: auto; object-fit: contain; display: block; }
body.recolhido .brand-mark  { display: block; }
body.recolhido .brand-cheia { display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -.02em; }
.brand-sub { font-size: 11px; color: #7c8aa5; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.sidebar-collapse {
  display: none;
}
body.recolhido .brand-text, body.recolhido .nav-item span, body.recolhido .foot-btn span { display: none; }
body.recolhido .nav-item, body.recolhido .foot-btn { justify-content: center; padding: 11px 0; }
body.recolhido .brand { justify-content: center; padding: 2px 0 16px; }
body.recolhido .sidebar { padding: 16px 10px; }
.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  color: #9fb0cc; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s;
  background: none; border: 0; font-family: inherit; font-size: 14px; text-align: left; width: 100%;
}
.nav-item i { font-size: 17px; flex: none; transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.nav-item:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.nav-item:hover i { transform: translateY(-1px) scale(1.12); }
.nav-item.active { background: rgba(37,99,235,.24); color: #fff; }
.nav-item.active i { color: var(--brand-2); }
/* criar é a ação que abre o produto: ela merece a cor quente da marca */
.nav-item[href$="/orcamento/novo"] i { color: var(--laranja); }
.nav-item[href$="/orcamento/novo"]:hover i,
.nav-item[href$="/orcamento/novo"].active i { color: #ff8420; }
.nav-item.active::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand-2);
}
.nav-item { position: relative; }
.nav-sep { height: 1px; background: rgba(255,255,255,.08); margin: 8px 12px; }
body.recolhido .nav-sep { margin: 8px 8px; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.foot-btn {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  background: transparent; border: none; color: #9fb0cc; font-family: inherit;
  font-weight: 500; font-size: 14px; cursor: pointer; text-align: left;
}
.foot-btn i { flex: none; font-size: 16px; transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.foot-btn:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.foot-btn:hover i { transform: rotate(-12deg) scale(1.12); }
#btnCollapse:hover i { transform: translateX(2px) scale(1.15); }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut); background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
  position: sticky; top: 0; z-index: 30;
}
.page-title { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.page-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
/* `flex-wrap: wrap` e `min-width: 0` na base, e não só no celular.
   -------------------------------------------------------------------------
   O `#selSalvo` desta barra não mostra só "salvo": ele também carrega a
   mensagem de erro do servidor. "Já existe um orçamento com o código
   ORC-2026-0042 nesta empresa. Use outro." vira uma pílula de 500px que, sem
   permissão para quebrar, empurrava a barra a 1.096px dentro de um pai de
   1.028 — e a página inteira ia junto. Aparecia em qualquer largura entre
   900px e 1.240px, e só DEPOIS de um erro, que é o pior momento possível para
   o layout se desmanchar. Em tela larga nada muda: lá tudo cabe numa linha. */
.topbar-right {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 10px; min-width: 0;
}
.topbar-right > .selo { min-width: 0; max-width: 100%; white-space: normal; }
/* ---------- componentes ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.card-h { padding: 13px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-h h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.card-h h3 .bi { color: var(--brand-2); font-size: 16px; }
.card-b { padding: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 0 13px;
  height: var(--h); font-size: 13.5px; color: var(--ink); background: var(--field-bg);
  font-family: inherit; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.field textarea { height: auto; padding: 9px 13px; line-height: 1.5; resize: vertical; min-height: 68px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.field .dica { font-size: 11px; color: var(--muted); }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1560px) { .editor .g2.g2-quebra { grid-template-columns: 1fr; } }
.g3 { grid-template-columns: 1fr 1fr 1fr; }
/* Cliente, campo por campo do tamanho do dado:
     Razão social é nome de empresa por extenso — leva a maior parte.
     Responsável é nome de pessoa — cabe em 280px sem apertar.
     Telefone tem 15 caracteres formatados e nunca mais; o resto vai ao e-mail. */
.g-razao-resp { grid-template-columns: 1fr 280px; }
.g-fone-email { grid-template-columns: 172px 1fr; }
.g-2-1 { grid-template-columns: 1fr 186px; }   /* CNPJ formatado precisa de folga */
.g-1-auto { grid-template-columns: 1fr auto; align-items: end; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 14px; border-radius: 10px; font-family: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn .bi { font-size: 16px; }
.btn.sm { height: var(--h-sm); padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.btn.xs { height: var(--h-sm); width: var(--h-sm); padding: 0; border-radius: 9px; flex: none; }
.btn-primary { background: linear-gradient(135deg, var(--acao-2), var(--acao)); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.22); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acao-ring); }
.btn-ghost { background: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.btn-outline { background: var(--panel); border-color: var(--borda); color: var(--ink-2); }
.btn-outline:hover { border-color: var(--acao-2); color: var(--acao-2); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger-ghost:hover { background: var(--danger-soft); color: var(--danger); }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 13px;
  border-radius: 9px; border: 1px solid var(--borda); background: var(--field-bg);
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.chip-btn:hover { border-color: var(--brand-2); color: var(--brand); }
.chip-btn.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 11px; padding: 11px 15px; font-size: 13px; color: var(--ink);
  box-shadow: 0 16px 40px -16px rgba(15,23,42,.35); animation: toastIn .22s ease;
  display: flex; align-items: center; gap: 9px; max-width: 340px;
}
.toast.ok  { border-left-color: var(--green); }
.toast.err { border-left-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
/* ==========================================================================
   EDITOR — formulário à esquerda, papel à direita
   ========================================================================== */

/* ==========================================================================
   GRADE DO EDITOR
   ========================================================================== */
.editor {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(520px, 1fr);
  flex: 1; min-height: 0; min-width: 0;
}
.ed-form {
  overflow-x: hidden;   /* nada de rolagem lateral no formulário */
  padding: var(--gut) var(--gut) 72px;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 0;
}
/* ==========================================================================
   PAINEL DO PAPEL
   ========================================================================== */
.ed-preview {
  background: #e9edf4; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
body.dark .ed-preview { background: #060a14; }
.prev-topo {
  flex: none; background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 12px var(--gut); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.modelos-tira { display: flex; gap: 8px; overflow-x: auto; padding: 1px; min-width: 0; flex: 1; }
.prev-ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.modelo-card {
  flex: none; width: 68px; cursor: pointer; border: 1.5px solid var(--line-2);
  border-radius: 9px; overflow: hidden; background: var(--panel);
  transition: border-color .15s, box-shadow .15s, transform .15s; font-family: inherit; padding: 0;
}
.modelo-card:hover:not(:disabled) { border-color: var(--brand-2); transform: translateY(-1px); }
.modelo-card.active { border-color: var(--brand); box-shadow: 0 0 0 2.5px rgba(37,99,235,.18); }
.modelo-mini {
  display: block; height: 46px; background: #fff; padding: 5px 6px;
  position: relative; border-bottom: 1px solid var(--line-2);
}
.modelo-mini i { display: block; background: #dfe4ec; border-radius: 1px; margin-bottom: 2.5px; }
.modelo-mini .m-cab { height: 4px; background: var(--brand); width: 55%; margin-bottom: 4px; }
.modelo-mini .m-cab.fina { height: 2px; }
/* o Premium se distingue na miniatura por duas coisas: a barra do topo mais
   grossa (a logo maior) e o cartão do total no canto. Miniatura que não
   diferencia é decoração — a pessoa tem de escolher pelo desenho, não pelo
   nome. */
.modelo-mini .m-cab.alta { height: 7px; }
.modelo-mini .m-cart {
  height: 10px; width: 38%; margin-top: 5px;
  border-left: 2px solid var(--brand); background: var(--brand-soft);
}
.modelo-mini .m-cart.dir { margin-left: auto; }
/* A miniatura do Pro tem de contar a diferença dele num quadrado de 60×40:
   o fio na margem esquerda, a marca à DIREITA, a caixa do total logo abaixo
   e a barra escura do cabeçalho da tabela. */
.modelo-mini .m-fio {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px;
  background: var(--brand); margin: 0; border-radius: 0;
}
.modelo-mini .m-cab.dir { margin-left: auto; width: 34%; height: 4px; }
.modelo-mini .m-caixa {
  height: 9px; background: var(--brand-soft); border-radius: 1px; margin: 4px 0 3px;
}
.modelo-mini .m-barra { height: 3px; background: var(--ink); margin-bottom: 3px; }
.modelo-mini .m-capa { height: 22px; background: var(--brand); opacity: .18; margin-bottom: 4px; }
.modelo-mini .m-tab { height: 12px; background: repeating-linear-gradient(
  to bottom, #dfe4ec 0 2px, transparent 2px 4px); margin: 3px 0; }
.modelo-mini .m-tab.curta { height: 7px; }
.modelo-mini .m-l { height: 2.5px; }
.modelo-mini .w90 { width: 90% } .modelo-mini .w70 { width: 70% }
.modelo-mini .w60 { width: 60% } .modelo-mini .w50 { width: 50% }
.modelo-mini .w45 { width: 45% } .modelo-mini .w40 { width: 40% }
.modelo-mini .w35 { width: 35% } .modelo-mini .w30 { width: 30% }
.modelo-mini .dir { margin-left: auto; background: var(--brand); opacity: .5; }
.modelo-nome {
  display: block; font-size: 10px; font-weight: 650; color: var(--ink-2);
  padding: 4px 3px; text-align: center;
}
.modelo-card.active .modelo-nome { color: var(--brand); background: var(--brand-soft); }
.modelo-card.soon { opacity: .4; cursor: not-allowed; }
.seg { display: inline-flex; background: var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; flex: none; }
.seg button {
  height: 26px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .14s;
}
.seg button.active { background: var(--panel); color: var(--brand); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.zoom-grupo { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.zoom-val {
  min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 650;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ed-palco {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 22px var(--gut) 44px; display: flex; justify-content: center; align-items: flex-start;
}
.palco-caixa { flex: none; }
.palco-inner { transform-origin: top left; }
.pp-folha { box-shadow: 0 18px 50px -22px rgba(15,23,42,.45); }
/* ==========================================================================
   EMITENTE
   ========================================================================== */
/* sem degradê: bloco com gradiente é a assinatura de template comprado */
.card-emitente { background: var(--panel); }
.emit { padding: 13px 16px; }
/* mesma tipografia do rótulo de campo: dois estilos de rótulo na mesma tela
   é o tipo de detalhe que faz o painel parecer montado por duas pessoas */
.emit-rot {
  display: block; font-size: 12px; font-weight: 650; letter-spacing: -.005em;
  color: var(--ink-2); margin-bottom: 7px;
}
.emit-sel { display: flex; align-items: center; gap: 10px; }
.emit-logo {
  width: 46px; height: 38px; flex: none; border-radius: 8px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); font-size: 16px; overflow: hidden;
}
.emit-logo img { max-width: 88%; max-height: 80%; object-fit: contain; }
.emit-sel select {
  flex: 1; height: var(--h); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 32px 0 12px; font-size: 14px; font-weight: 650; color: var(--ink);
  background: var(--field-bg); font-family: inherit; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.emit-sel select:disabled { opacity: 1; background-image: none; padding-right: 12px; }
.emit-sel .btn { width: var(--h); padding: 0; flex: none; }
/* ==========================================================================
   ITENS
   ========================================================================== */
.card-b--flush { padding: 0; }
.card-dica { font-size: 11.5px; color: var(--muted); }
.itens-cab {
  display: grid; grid-template-columns: 34px 1fr 50px 104px 118px; gap: 8px;
  align-items: end;
  font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .09em; padding: 11px 16px 9px; border-bottom: 1px solid var(--line-2);
}
.itens-cab .num { text-align: right; }
.itens-cab span:nth-child(3), .itens-cab span:nth-child(4) { text-align: center; }
/* o cabeçalho rotula a PRIMEIRA fileira; a segunda é apoio e se explica sozinha */
.itens-cab span:last-child { text-align: right; }

/* ==========================================================================
   A LINHA DO ITEM
   --------------------------------------------------------------------------
   Duas fileiras, cinco colunas, sempre as mesmas guias:

     [nº ]  nome ................  qtd   un    valor
     [dup]  descrição ..........   cobrança    total
     [del]

   Regra que manda aqui: as duas fileiras TERMINAM na mesma guia da direita.
   É isso que faz a seção parecer desenhada em vez de montada.
   ========================================================================== */
.item-linha {
  display: grid; gap: 7px 8px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
  /* Quantidade quase sempre é 1, 2 ou 8 — cabe em 42px. Unidade e cobrança
     são SELECTS com texto ("hora", "Investimento único"), e apertados cortavam
     a palavra no meio. O que sobrou da quantidade foi para eles. */
  grid-template-columns: 34px 1fr 42px 126px 118px;
  grid-template-areas:
    "lado nome qtd  un   valor"
    "lado desc cob  cob  total";
  transition: background .14s;
}
.item-linha:hover { background: var(--bg); }
body.dark .item-linha:hover { background: rgba(255,255,255,.025); }

/* a coluna estreita da esquerda: número em cima, ações embaixo */
.item-lado {
  grid-area: lado; display: flex; flex-direction: column; align-items: center; gap: 3px;
  align-self: start; padding-top: 3px;
}
.item-n {
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1; padding-bottom: 2px;
}
.item-ic {
  width: 22px; height: 22px; border: 0; border-radius: 6px; background: none;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 11px;
  opacity: .3; transition: all .13s; padding: 0;
}
.item-linha:hover .item-ic, .item-linha:focus-within .item-ic { opacity: 1; }
.item-ic:hover { background: var(--line-2); color: var(--ink); }
.item-ic.perigo:hover { background: var(--danger-soft); color: var(--danger); }

.item-linha > .item-nome-wrap { grid-area: nome; min-width: 0; position: relative; }
.item-linha > [data-c="qtd"]  { grid-area: qtd; text-align: center; padding: 0 4px; }
.item-linha > [data-c="un"]   { grid-area: un;  text-align: center; }
.item-linha > .item-val       { grid-area: valor; }
.item-linha > .item-desc      { grid-area: desc; }
.item-linha > .item-cob       { grid-area: cob; }
.item-linha > .item-total     { grid-area: total; }

.item-linha input, .item-linha select {
  height: 34px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 10px;
  font-size: 13px; font-family: inherit; background: var(--field-bg); color: var(--ink);
  width: 100%; min-width: 0;
}
.item-linha input:focus, .item-linha select:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.item-linha input[data-c="nome"] { font-weight: 600; }

/* a segunda fileira é apoio: um degrau mais discreta que a primeira */
.item-desc, .item-cob { height: 32px !important; font-size: 12px !important; color: var(--ink-2); }
.item-cob {
  -webkit-appearance: none; appearance: none; padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* total travado: mesma caixa dos outros, mas lido como resultado, não campo */
.item-total {
  height: 32px !important; font-size: 13px !important; font-weight: 700 !important;
  color: var(--ink) !important; text-align: right;
  background: var(--bg) !important; border-color: var(--line-2) !important;
  cursor: default; font-variant-numeric: tabular-nums;
}
body.dark .item-total { background: rgba(255,255,255,.03) !important; }
.item-total:focus { box-shadow: none !important; border-color: var(--line-2) !important; }

/* sugestão do catálogo, embaixo do nome */
.sugere {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--panel); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 14px 34px -10px rgba(15,23,42,.28); overflow: hidden; max-height: 232px;
  overflow-y: auto;
}
.sugere button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit;
  border-bottom: 1px solid var(--line-2);
}
.sugere button:last-child { border-bottom: 0; }
.sugere button:hover, .sugere button.sel { background: var(--brand-soft); }
.sugere .s-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sugere .s-txt b {
  font-size: 13px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sugere .s-txt small { font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugere .s-val {
  font-size: 12.5px; font-weight: 700; color: var(--acao-2); flex: none;
  font-variant-numeric: tabular-nums;
}

.num { text-align: right; font-variant-numeric: tabular-nums; }

.val-suf { position: relative; display: flex; align-items: center; }
.val-suf .pre {
  position: absolute; left: 10px; font-size: 11.5px; color: var(--muted); pointer-events: none;
}
.val-suf .pre ~ input { padding-left: 28px; }
.val-suf > span:not(.pre) {
  position: absolute; right: 10px; font-size: 12px; color: var(--muted); pointer-events: none;
}
.itens-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: var(--bg); border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
body.dark .itens-pe { background: rgba(255,255,255,.025); }
.itens-pe-tot { font-size: 13px; color: var(--ink-2); display: flex; align-items: baseline; gap: 10px; }
.itens-pe-tot b { font-size: 15px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.vazio { text-align: center; padding: 34px 20px 30px; }
.vazio-ic {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 20px;
}
.vazio b { display: block; font-size: 14px; color: var(--ink); }
.vazio p { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
/* ==========================================================================
   VALORES
   ========================================================================== */
/* o meio (imposto) é quem tem dois campos e uma frase: ele cresce.
   O resumo à direita só mostra números curtos e pode encolher. */
.val-grade { display: grid; grid-template-columns: 150px minmax(0,1fr) 228px; gap: 14px 16px; align-items: start; }
.val-grade > .val-col { padding-right: 4px; }
.val-grade > .val-col + .val-col { border-left: 1px solid var(--line-2); padding-left: 18px; padding-right: 0; }
.val-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.val-col .seg-radio { width: 100%; }
.val-rot {
  font-size: 11.5px; font-weight: 650; color: var(--ink-2);
}
.val-in { display: flex; flex-direction: column; gap: 5px; }
.val-in input, .val-dupla input {
  height: var(--h); border: 1px solid var(--borda); border-radius: var(--radius-sm);
  padding: 0 12px; font-size: 13.5px; font-family: inherit;
  background: var(--field-bg); color: var(--ink); width: 100%;
}
.val-in input:focus, .val-dupla input:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.val-dupla { display: grid; grid-template-columns: minmax(0,1fr) 84px; gap: 7px; }
.val-dupla .val-suf input { padding-right: 26px; }
.val-eq { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: auto; }
.val-eq b { color: var(--ink-2); font-weight: 650; }
.seg-radio { display: inline-flex; background: var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-radio button {
  flex: 1; height: 30px; padding: 0 8px; min-width: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: all .14s;
}
.seg-radio button.active { background: var(--panel); color: var(--acao-2); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.seg-radio.sm { height: var(--h); align-items: center; }
.seg-radio.sm button { height: 30px; padding: 0 9px; font-size: 12px; }
.val-total {
  grid-column: 3;
  font-size: 12.5px;
  align-self: stretch; display: flex; flex-direction: column; gap: 6px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 13px;
}
body.dark .val-total { background: rgba(255,255,255,.03); }
.val-total div { display: flex; justify-content: space-between; gap: 10px; }
.val-total span:last-child { white-space: nowrap; }
.val-total span:first-child { color: var(--ink-2); }
.val-total span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.val-total .rc-total {
  border-top: 1px solid var(--line); padding-top: 9px; margin-top: 5px;
  align-items: baseline; gap: 8px;
}
.val-total .rc-total span:first-child { font-size: 12px; line-height: 1.2; }
.val-total .rc-total span:last-child  { font-size: 16px; white-space: nowrap; }
.val-total .rc-total span { font-weight: 800; color: var(--ink); }
.val-total .rc-mensal { margin-top: 2px; }
.val-total .rc-mensal span { color: var(--brand); font-weight: 700; font-size: 12.5px; }
.val-total .rc-desc span:last-child { color: var(--danger); }
/* ==========================================================================
   EDITOR DE TEXTO
   ========================================================================== */
.rt { border: 1px solid var(--borda); border-radius: var(--radius-sm); overflow: hidden; background: var(--field-bg); }
.rt:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.rt-barra {
  display: flex; align-items: center; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--line-2); background: var(--bg); flex-wrap: wrap;
}
body.dark .rt-barra { background: rgba(255,255,255,.03); }
.rt-barra button {
  width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 14px;
  transition: all .13s;
}
.rt-barra button:hover { background: var(--line-2); color: var(--ink); }
.rt-barra button.on { background: var(--line-2); color: var(--acao-2); }
.rt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
.rt-cores { display: inline-flex; gap: 4px; }
.rt-cor {
  width: 17px !important; height: 17px !important; border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.75) !important; box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; padding: 0;
}
.rt-cor:hover { transform: scale(1.14); }
.rt-corpo {
  min-height: 264px; max-height: 460px; overflow-y: auto; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink); outline: none;
}
.rt-corpo:empty::before { content: attr(data-vazio); color: var(--muted); }
.rt-corpo ul, .rt-corpo ol { margin: 4px 0 4px 20px; }
/* ==========================================================================
   CAMPOS ESPECIAIS
   ========================================================================== */
.campo-acao { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.g-cep    { grid-template-columns: 124px 1fr 84px; }
.g-cidade { grid-template-columns: 1fr 1fr 88px; }
.g-emp1   { grid-template-columns: 1fr 190px 170px; }
/* Datas e condições, três linhas com propósito:
     1) Número · Emissão · Válido até     — a identidade do documento
     2) Atalho da validade · Prazo        — o atalho fica ao lado do que ele muda
     3) Forma de pagamento · Condições    — as duas frases que o cliente lê junto
   A forma de pagamento é curta e conhecida ("PIX", "Boleto"); as condições são
   uma frase inteira. Daí a proporção desigual na terceira linha. */
.g-num-datas { grid-template-columns: 1fr 168px 168px; }
.g-prazo     { grid-template-columns: 148px 1fr; }
.g-pag-cond  { grid-template-columns: 230px 1fr; }
.g-smtp   { grid-template-columns: 1fr 100px 130px; }
.erro-campo { font-size: 11px; color: var(--danger); }
input.ruim, select.ruim { border-color: var(--danger) !important; }
input.ruim:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.campo-copia { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.acao-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.dica { font-size: 11.5px; color: var(--muted); }
/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1520px) {
  /* estreitou: o nome ganha a linha inteira e o resto se organiza embaixo,
     sempre terminando na mesma guia da direita */
  .itens-cab { display: none; }
  .item-linha {
    grid-template-columns: 34px 1fr 50px 104px 118px;
    grid-template-areas:
      "lado nome nome nome nome"
      "lado desc desc desc desc"
      "lado qtd  un   cob  valor"
      "lado .    .    .    total";
    padding: 13px 16px;
  }
  .item-linha > .item-cob { height: 34px !important; }
  /* Número, Emissão e Válido até continuam lado a lado: as três formam a
     identidade do documento e quebrar isso em duas linhas embaralha a leitura.
     Só abaixo de 760px (celular) elas empilham. */
  .g-num-datas { grid-template-columns: minmax(0,1fr) 138px 138px; }
  .g-prazo     { grid-template-columns: 132px 1fr; }
  .g-pag-cond  { grid-template-columns: 1fr 1fr; }
  .g-razao-resp { grid-template-columns: 1fr 1fr; }
  .g-fone-email { grid-template-columns: 148px 1fr; }
  .g-emp1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1240px) {
  /* `minmax(0, 1fr)` e não `1fr`: item de grade nasce com `min-width: auto`, e
     a folha A4 de 794px esticava a coluna inteira — 1307px de rolagem lateral
     numa tela de 1024. Com o mínimo em zero, o `overflow: auto` do palco volta
     a ter efeito e a folha rola dentro dele, como já rolava no computador. */
  .editor { grid-template-columns: minmax(0, 1fr); }
  .app { height: auto; overflow: visible; }
  /* `.ed-palco` fica FORA desta lista de propósito. Eu o tinha incluído, e o
     resultado só aparecia depois de preencher o orçamento: a folha A4 tem
     794px de largura de layout, o `transform: scale` do zoom encolhe o que se
     vê mas NÃO encolhe a caixa, e sem overflow para conter ela empurrava a
     página inteira para 830px — arrastando a barra do topo junto. O sintoma
     ("a barra quebrou") ficava longe da causa (o papel). */
  .main, .ed-form { overflow: visible; }
  .ed-preview { border-left: 0; border-top: 1px solid var(--line); }
}
/* O bloco que existia aqui foi absorvido pelo recorte de 900px do FIM do
   arquivo — o de verdade, escrito olhando aparelho.
   -------------------------------------------------------------------------
   Ele deitava a barra lateral, mas com `.sidebar { position: static }` sem
   tocar em `body.recolhido .sidebar`, que tem especificidade maior e vence
   sempre. O que se via num tablet de 768px era o pior dos dois mundos: a
   barra virava uma coluna de 72px de largura por 4.509px de ALTURA, com os
   ícones deitados dentro dela. Deixar as duas versões brigando seria pior do
   que apagar esta. */
@media print {
  .app, .sidebar, .topbar, .ed-form, .prev-topo, .toast-wrap, .modal-fundo { display: none !important; }
}
/* ==========================================================================
   TOOLTIP — o mesmo padrão do painel do Skrap
   ========================================================================== */
/* O tooltip é desenhado por JS numa camada fixa (ver ui.js). Pseudoelemento
   não serve: qualquer ancestral com overflow:auto o corta, e o painel tem
   três deles — sidebar, formulário e palco. */
.tip { position: relative; }
.tip:hover::after { opacity: 1; transform: translateY(-50%) translateX(2px); }
.tip:hover::before { opacity: 1; }
/* na sidebar expandida o rótulo já está visível — não repete */
body:not(.recolhido) .sidebar .tip::after,
body:not(.recolhido) .sidebar .tip::before { display: none; }
/* fora da sidebar o balão vai por baixo */
.topbar .tip::after, .prev-topo .tip::after, .item-acao .tip::after, .rt-barra .tip::after {
  left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
}
.topbar .tip::before, .prev-topo .tip::before, .item-acao .tip::before, .rt-barra .tip::before {
  left: 50%; top: calc(100% + 3px); transform: translateX(-50%);
  border-right-color: transparent; border-bottom-color: #0f172a;
}
.topbar .tip:hover::after, .prev-topo .tip:hover::after,
.item-acao .tip:hover::after, .rt-barra .tip:hover::after { transform: translateX(-50%) translateY(2px); }
/* ==========================================================================
   MENU SUSPENSO
   ========================================================================== */
.menu-wrap { position: relative; }
#btnDownload .cs { font-size: 12px; opacity: .8; margin-left: -2px; transition: transform .16s; }
#btnDownload.aberto .cs { transform: rotate(180deg); }
.menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 130; min-width: 262px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 20px 48px -16px rgba(15,23,42,.35); padding: 6px; overflow: hidden;
  animation: menuIn .14s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px); } }
.menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; color: var(--ink); cursor: pointer; transition: background .12s;
}
.menu button:hover { background: var(--brand-soft); }
.menu button > i { font-size: 19px; color: var(--brand); flex: none; }
.menu button span { display: flex; flex-direction: column; min-width: 0; }
.menu button b { font-size: 13.5px; font-weight: 650; }
.menu button small { font-size: 11.5px; color: var(--muted); }
/* ==========================================================================
   MODAL
   ========================================================================== */
body.travado { overflow: hidden; }
.modal-fundo {
  position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  backdrop-filter: blur(3px); animation: fundoIn .16s ease;
}
@keyframes fundoIn { from { opacity: 0; } }
.modal-fundo[hidden] { display: none; }
.modal {
  background: var(--panel); border-radius: 18px; width: 100%; max-width: 560px;
  box-shadow: 0 34px 80px -26px rgba(15,23,42,.6); display: flex; flex-direction: column;
  max-height: 92vh; overflow: hidden; animation: modalIn .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal.modal-xl { max-width: 1060px; }
.modal.modal-sm { max-width: 430px; }
.modal-h {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-h h3 { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.modal-h h3 .bi { color: var(--brand-2); font-size: 17px; }
.modal-sub { font-size: 12px; color: var(--muted); }
.modal-x {
  margin-left: auto; border: 0; background: var(--line-2); width: 32px; height: 32px;
  border-radius: 9px; color: var(--ink-2); cursor: pointer; flex: none; font-size: 14px;
  display: grid; place-items: center; transition: all .14s;
}
.modal-x:hover { background: var(--danger-soft); color: var(--danger); }
.modal-b { padding: 20px; overflow: auto; }
.modal-b--duplo { display: grid; grid-template-columns: 232px 1fr; padding: 0; overflow: hidden; min-height: 0; }
.modal-f {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg);
}
body.dark .modal-f { background: rgba(255,255,255,.02); }
.modal-f .sep { flex: 1; }
.duplo-lista {
  border-right: 1px solid var(--line); background: var(--bg);
  padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
body.dark .duplo-lista { background: rgba(255,255,255,.02); }
.duplo-lista-cab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 2px 6px 8px;
}
.duplo-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; font-family: inherit; cursor: pointer; transition: all .14s;
}
.duplo-item:hover { background: var(--panel); border-color: var(--line-2); }
.duplo-item.active { background: var(--panel); border-color: var(--brand); box-shadow: 0 0 0 2px rgba(37,99,235,.16); }
.duplo-av {
  width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 800; overflow: hidden;
}
.duplo-av img { max-width: 90%; max-height: 82%; object-fit: contain; }
.duplo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.duplo-txt b { font-size: 13px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duplo-txt small { font-size: 11px; color: var(--muted); }
.duplo-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand); background: var(--brand-soft); padding: 2px 6px; border-radius: 5px; flex: none;
}
.duplo-add {
  margin-top: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 11px;
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: all .14s;
}
.duplo-add:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.duplo-add:disabled { opacity: .55; cursor: not-allowed; }
.duplo-form { padding: 20px; overflow-y: auto; min-height: 0; }
.duplo-abas { padding: 12px; }
.duplo-abas button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  cursor: pointer; transition: all .14s;
}
.duplo-abas button i { font-size: 15px; }
.duplo-abas button:hover { background: var(--panel); color: var(--ink); }
.duplo-abas button.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.sub-tit {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 10px; display: flex; align-items: center; gap: 7px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}
.sub-tit:first-child { margin-top: 0; }
.sub-tit .bi { font-size: 13px; color: var(--brand-2); }
.opt-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.opt-linha:last-child { border-bottom: 0; }
.opt-linha b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.opt-linha small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 460px; line-height: 1.45; }
.opt-linha.perigo b { color: var(--danger); }
.switch { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .18s;
}
.switch span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .18s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 1px 3px rgba(15,23,42,.3);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.aviso-fase {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 10px;
  background: var(--amber-soft); color: #92400e; font-size: 12.5px; margin-bottom: 6px;
}
body.dark .aviso-fase { color: #fbbf24; }
.plano-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg);
}
body.dark .plano-card { background: rgba(255,255,255,.03); }
.plano-nome { font-size: 15px; font-weight: 750; color: var(--ink); }
.plano-card small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.plano-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber); background: var(--amber-soft); padding: 4px 9px; border-radius: 6px;
}
.plano-grade { margin-top: 14px; }
.plano-op {
  border: 1px solid var(--line); border-radius: 13px; padding: 15px; text-align: center;
  transition: all .15s; cursor: default;
}
.plano-op:hover { border-color: var(--brand-2); transform: translateY(-2px); }
.plano-op b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.plano-op span { display: block; font-size: 11.5px; color: var(--muted); margin: 2px 0 9px; }
.plano-op em { font-style: normal; font-size: 19px; font-weight: 800; color: var(--brand); }
.plano-op em small { font-size: 11px; font-weight: 500; color: var(--muted); }
/* confirmação */
.conf { text-align: center; padding: 26px 24px 20px; }
.conf-ic {
  width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 15px;
  background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; font-size: 22px;
}
.conf-ic--ok { background: var(--brand-soft); color: var(--brand); }
.conf h3 { font-size: 16.5px; font-weight: 750; margin-bottom: 7px; }
.conf p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
/* logo solta, com arrastar e soltar */
.logo-solta {
  display: flex; gap: 15px; align-items: center; padding: 15px;
  border: 1.5px dashed var(--line); border-radius: 13px; transition: all .16s; cursor: pointer;
}
.logo-solta:hover, .logo-solta.sobre { border-color: var(--brand); background: var(--brand-soft); }
.logo-previa {
  width: 108px; height: 58px; flex: none; border-radius: 10px;
  display: grid; place-items: center; color: var(--muted); font-size: 21px; overflow: hidden;
  background-image:
    linear-gradient(45deg, #eef1f6 25%, transparent 25%, transparent 75%, #eef1f6 75%),
    linear-gradient(45deg, #eef1f6 25%, transparent 25%, transparent 75%, #eef1f6 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; background-color: #fff;
  border: 1px solid var(--line-2);
}
.logo-previa img { max-width: 92%; max-height: 86%; object-fit: contain; display: block; }
.logo-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logo-info > div { font-size: 13px; font-weight: 600; color: var(--ink); }
.logo-info small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.logo-acoes { display: flex; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
/* recorte */
.crop-palco { display: flex; justify-content: center; margin-bottom: 15px; }
#cropCanvas { border: 1px solid var(--line); border-radius: 11px; cursor: grab; display: block; touch-action: none; }
#cropCanvas:active { cursor: grabbing; }
.crop-ctrl { display: flex; flex-direction: column; gap: 13px; }
.crop-prop { display: flex; gap: 7px; flex-wrap: wrap; }
.crop-zoom { display: flex; align-items: center; gap: 11px; }
.crop-zoom .bi { color: var(--muted); font-size: 14px; flex: none; }
.crop-zoom input[type=range] { flex: 1; accent-color: var(--brand); min-width: 0; }
.crop-dica { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.crop-dica b { color: var(--ink-2); font-weight: 600; }
/* ==========================================================================
   CAMPO DE COR
   ========================================================================== */
.cor-campo {
  display: flex; align-items: center; gap: 9px; height: var(--h);
  border: 1px solid var(--borda); border-radius: var(--radius-sm);
  padding: 0 10px 0 6px; background: var(--field-bg);
}
.cor-campo input[type=color] {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: none; cursor: pointer; flex: none;
}
.cor-campo input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.cor-campo input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.14); border-radius: 6px; }
.cor-campo input[type=text] {
  border: 0; height: 100%; padding: 0; font-size: 12.5px; background: none; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase;
  width: 100%; min-width: 0;
}
.cor-campo input[type=text]:focus { outline: none; }
.cor-campo:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
/* item da lista: nome numa linha só, tag alinhada */
.duplo-item { align-items: center; }
.duplo-txt { overflow: hidden; }
.duplo-txt b, .duplo-txt small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.duplo-tag { align-self: center; }
/* ==========================================================================
   O USUÁRIO NO RODAPÉ DA SIDEBAR
   --------------------------------------------------------------------------
   Fica embaixo, não em cima: quem usa o painel o dia inteiro não precisa ver
   o próprio nome o tempo todo, precisa ver o menu. Recolhido, sobra o avatar.
   ========================================================================== */
.eu-wrap { position: relative; }
.eu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: #cdd9ec;
  font-family: inherit; text-align: left; transition: background .15s;
}
.eu:hover { background: rgba(255, 255, 255, .1); }
.eu-av {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--laranja-2), var(--laranja)); color: #3a1a00;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
.eu-txt { min-width: 0; flex: 1; display: grid; }
.eu-txt b {
  font-size: 12.5px; font-weight: 650; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eu-txt small {
  font-size: 10.5px; color: #7f93b4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eu-seta { font-size: 11px; color: #7f93b4; flex: none; }
body.recolhido .eu { justify-content: center; padding: 8px 0; background: none; }
body.recolhido .eu-txt, body.recolhido .eu-seta { display: none; }
body.recolhido .eu:hover { background: rgba(255, 255, 255, .08); }
.menu--cima { bottom: calc(100% + 8px); top: auto; left: 0; right: auto; min-width: 250px; z-index: 140; }
body.recolhido .menu--cima { left: calc(100% + 8px); bottom: 0; }
.menu-cab {
  display: grid; gap: 2px; padding: 11px 13px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.menu-cab b { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.menu-cab small { font-size: 11px; color: var(--muted); }
.menu button.perigo > i { color: var(--danger); }
.menu button.perigo:hover { background: var(--danger-soft); }
/* ==========================================================================
   SELO DE SALVAMENTO — discreto, ao lado dos botões
   ========================================================================== */
.selo {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h);
  padding: 0 4px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted);
  transition: opacity .2s; white-space: nowrap;
}
.selo.vazio { opacity: 0; width: 0; padding: 0; overflow: hidden; }
.selo--salvo { color: var(--green); }
.selo--erro  { color: var(--danger); }
.selo .gira { animation: selogira .9s linear infinite; display: inline-block; }
@keyframes selogira { to { transform: rotate(360deg); } }
/* ==========================================================================
   TARJA DE ASSINATURA
   --------------------------------------------------------------------------
   Aparece só quando há o que dizer. Vencida: âmbar, ainda dá para ler e
   exportar. Sem plano: cinza-chumbo, o caminho é escolher um.
   ========================================================================== */
.tarja {
  display: flex; align-items: center; gap: 13px;
  margin: 0 var(--gut) 0; padding: 12px 16px;
  border-radius: var(--radius); border: 1px solid;
  font-size: 13px;
}
.tarja > .bi { font-size: 18px; flex: none; }
.tarja-txt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.tarja-txt b { font-size: 13.5px; font-weight: 700; }
.tarja-txt span { color: var(--ink-2); line-height: 1.45; }
.tarja--aviso { background: var(--amber-soft); border-color: #f6dfa4; color: #8a5a00; }
.tarja--aviso .tarja-txt b { color: #7a4f00; }
.tarja--parada { background: var(--danger-soft); border-color: #f5c6c6; color: #a92222; }
.tarja--parada .tarja-txt b { color: #8f1d1d; }
body.dark .tarja--aviso { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #f0c060; }
body.dark .tarja--parada { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #f08c8c; }
@media (max-width: 700px) {
  .tarja { margin: 0 16px; flex-wrap: wrap; }
  .tarja .btn { width: 100%; }
}



/* ==========================================================================
   TOOLTIP — camada fixa, desenhada por ui.js
   --------------------------------------------------------------------------
   Um único nó no fim do body, position:fixed. Assim ele não é cortado por
   sidebar, formulário ou palco, e vira de lado sozinho quando não cabe.
   ========================================================================== */
#dica {
  position: fixed; z-index: 9000; pointer-events: none;
  background: #0f172a; color: #e6edf7; border: 1px solid rgba(255,255,255,.09);
  padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 500;
  line-height: 1.35; max-width: 250px; white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s;
}
#dica.on { opacity: 1; transform: none; }
#dica.larga { white-space: normal; }
body.dark #dica { background: #1a2438; }

/* ==========================================================================
   FORMULÁRIO DA EMPRESA — cada campo com a largura do dado que recebe
   --------------------------------------------------------------------------
   A regra: campo de tamanho conhecido (CNPJ, CEP, UF, alíquota) fica fixo, e
   o que é texto livre absorve a sobra. Formulário de coluna única com tudo do
   mesmo tamanho é o que faz cadastro parecer interminável.
   ========================================================================== */
.g-emp-nome    { grid-template-columns: 1fr 186px 132px; }
.g-emp-contato { grid-template-columns: 168px 168px 1fr; }
.g-emp-pix     { grid-template-columns: 1fr 200px; }
.g-emp-num     { grid-template-columns: 128px 1fr 128px; }

@media (max-width: 900px) {
  .g-emp-nome, .g-emp-contato, .g-emp-num { grid-template-columns: 1fr 1fr; }
  .g-emp-pix { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SELO DE SALVAMENTO COM O TEMPO DECORRIDO
   ========================================================================== */
.selo--tempo { color: var(--muted); font-weight: 500; }
.selo--tempo .bi { font-size: 12px; opacity: .7; }

@media (max-width: 760px) {
  .g-num-datas  { grid-template-columns: 1fr; }
  .g-prazo, .g-pag-cond, .g-razao-resp, .g-fone-email { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ENVIAR POR E-MAIL
   --------------------------------------------------------------------------
   O modal é grande de propósito: escrever a mensagem que acompanha uma
   proposta de dez mil reais numa caixinha de três linhas convida a escrever
   "segue anexo" — que é exatamente o e-mail que não fecha negócio.
   ========================================================================== */
.modal--lg { max-width: 760px; width: calc(100vw - 48px); }
.em-corpo { display: grid; gap: 15px; }
.g-em-topo { grid-template-columns: 1fr 210px; }
.switch-linha { display: flex; align-items: center; gap: 10px; height: var(--h); }
.switch-linha small { font-size: 12.5px; color: var(--ink-2); }
.em-msg { min-height: 190px; max-height: 320px; }

.em-anexos { display: grid; gap: 8px; }
.em-anexo {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg);
}
body.dark .em-anexo { background: rgba(255,255,255,.03); }
.em-anexo > .bi { font-size: 19px; color: var(--danger); flex: none; }
.em-anexo-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.em-anexo-txt b {
  font-size: 12.5px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-anexo-txt small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.em-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acao-2); background: var(--brand-soft); padding: 3px 8px; border-radius: 20px; flex: none;
}
.em-anexo--fixo { border-style: solid; border-color: var(--borda); background: var(--panel); }
.em-anexo .tirar {
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none;
}
.em-anexo .tirar:hover { background: var(--danger-soft); color: var(--danger); }

.em-soltar {
  display: flex; align-items: center; gap: 11px; padding: 13px;
  border: 1.5px dashed var(--borda); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .14s; color: var(--ink-2);
}
.em-soltar:hover, .em-soltar.sobre { border-color: var(--acao-2); background: var(--brand-soft); }
.em-soltar > .bi { font-size: 17px; color: var(--muted); }
.em-soltar span { font-size: 13px; font-weight: 600; display: grid; gap: 1px; }
.em-soltar small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

.em-aviso { font-size: 12px; color: var(--muted); }
.em-aviso.cheio { color: var(--danger); font-weight: 600; }

@media (max-width: 640px) {
  .g-em-topo { grid-template-columns: 1fr; }
  .modal--lg { width: calc(100vw - 20px); }
}

/* ==========================================================================
   SUBSTITUIR DADOS DO CLIENTE — confirmação pequena
   ========================================================================== */
.sub-lista { display: grid; gap: 6px; margin-top: 12px; text-align: left; }
.sub-lista div {
  display: flex; gap: 10px; align-items: baseline; font-size: 12.5px;
  padding: 7px 11px; border-radius: 8px; background: var(--bg);
}
body.dark .sub-lista div { background: rgba(255,255,255,.03); }
.sub-lista span { color: var(--muted); min-width: 74px; flex: none; font-size: 11.5px; }
.sub-lista b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   EMITENTE — nome no seletor, documento embaixo
   ========================================================================== */
.emit-campo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.emit-doc {
  font-size: 11px; color: var(--muted); padding-left: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   DESCONTO E IMPOSTO — laranja no que é ajuste, não vermelho
   --------------------------------------------------------------------------
   Vermelho é erro. Desconto não é erro, é escolha do vendedor. E mensalidade
   em azul competia com o total; em laranja ela se lê como complemento.
   ========================================================================== */
.val-total .rc-desc span:last-child { color: var(--laranja); }
.val-total .rc-mensal span { color: var(--laranja); }

/* ==========================================================================
   MODO EDIÇÃO
   --------------------------------------------------------------------------
   Criar e editar são a mesma tela, e isso é uma armadilha: dá para achar que
   se está começando um documento novo quando na verdade se está mexendo num
   que já foi para o cliente.

   A distinção é o laranja da marca nas ações principais. Não é decoração —
   é o aviso de que o que você digitar altera um documento existente.
   ========================================================================== */
body.editando #btnDownload,
body.editando #btnExtrair,
body.editando #btnAddItem2,
body.editando #btnAddItem3 {
  background: linear-gradient(135deg, var(--laranja-2), var(--laranja));
  border-color: var(--laranja);
  color: #40200a;
  box-shadow: 0 4px 14px -6px rgba(237, 109, 2, .5);
}
body.editando #btnDownload:hover:not(:disabled),
body.editando #btnExtrair:hover:not(:disabled),
body.editando #btnAddItem2:hover:not(:disabled),
body.editando #btnAddItem3:hover:not(:disabled) { filter: brightness(1.08); }

body.editando #btnAddItem3 { background: var(--amber-soft); border-color: #f0d9a6; color: #7a4f00; }

/* o modelo ativo também acompanha */
body.editando .modelo-card.active { border-color: var(--laranja); box-shadow: 0 0 0 2.5px rgba(237,109,2,.2); }
body.editando .modelo-card.active .modelo-nome {
  color: #7a4300; background: rgba(255,198,0,.28); font-weight: 700;
}
body.editando .modelo-card.active .modelo-mini .m-cab,
body.editando .modelo-card.active .modelo-mini .m-capa,
body.editando .modelo-card.active .modelo-mini .dir { background: var(--laranja); }

/* o selo de salvamento fica âmbar: estou mexendo em algo que já existe */
body.editando .selo--salvo { color: #a06000; }

/* ==========================================================================
   ESTADO DO SMTP
   ========================================================================== */
.smtp-estado {
  display: none; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 10px 13px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5;
}
.smtp-estado.on { display: flex; }
.smtp-estado .bi { font-size: 15px; flex: none; margin-top: 1px; }
.smtp-estado--ok  { background: var(--green-soft); color: #06674a; }
.smtp-estado--err { background: var(--danger-soft); color: #a92222; }
.smtp-estado--neutro { background: var(--bg); color: var(--ink-2); }
body.dark .smtp-estado--neutro { background: rgba(255,255,255,.04); }
.acao-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dica { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.g-smtp { grid-template-columns: 1fr 110px 140px; }
@media (max-width: 900px) { .g-smtp { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   EQUIPE E CHAVE DE ATIVAÇÃO
   --------------------------------------------------------------------------
   Entrou em 29/07/2026, quando o acesso deixou de ser assinatura e passou a
   ser chave. A lista de pessoas é densa de propósito: no máximo três linhas na
   maioria das contas, e cada linha precisa dizer nome, e-mail, quantos
   orçamentos e o que dá para fazer — sem virar tabela.
   ========================================================================== */
.chave-caixa {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;                       /* no modal estreito o botão desce, não estoura */
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--brand-soft);
  /* borda derivada do token, não hex fixo: no tema escuro um #c9dcfb vira
     uma linha clara berrante em cima de fundo escuro */
  border: 1px solid var(--brand);
  border-color: color-mix(in srgb, var(--brand) 26%, transparent);
}
.chave-rot {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.chave-num {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
}
.chave-caixa small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; }

.eq-lista { display: grid; gap: 8px; }
.eq-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card);
}
.eq-item.off { opacity: .58; }
.eq-av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
}
.eq-quem { flex: 1; min-width: 0; display: grid; gap: 2px; }
.eq-quem b {
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.eq-quem small {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--line); color: var(--ink-2);
}
.eq-tag--tit { background: var(--amber-soft); color: var(--laranja); }
.eq-tag--off { background: var(--danger-soft); color: var(--danger); }
.eq-acoes { display: flex; gap: 4px; flex: none; }
.eq-vazio {
  padding: 18px; text-align: center; font-size: 12.5px; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
}

.cfg-dica { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }
.campo-dica { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: block; }

/* --- o modal de excluir conta -------------------------------------------- */
.mr-corpo { display: grid; gap: 13px; }
.modal--perigo .modal-h h2 { color: var(--danger); }
.risco-cab {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.risco-cab > .bi { font-size: 20px; color: var(--danger); flex: none; margin-top: 1px; }
.risco-cab b { display: block; font-size: 13.5px; color: var(--ink); }
.risco-cab small { font-size: 12px; color: var(--ink-2); }
.risco-lista { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.risco-lista li { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.risco-lista b { color: var(--ink); font-weight: 700; }

/* tela final depois que a conta é desligada */
.saiu {
  min-height: 100vh; display: grid; place-content: center; text-align: center;
  gap: 10px; padding: 40px; font-family: 'Inter', sans-serif; background: var(--panel);
}
.saiu .bi { font-size: 44px; color: var(--acao-2); justify-self: center; }
.saiu h1 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 6px 0 0; }
.saiu p { font-size: 14px; color: var(--ink-2); max-width: 42ch; margin: 0 auto; line-height: 1.6; }

/* ==========================================================================
   MODAL DE CONFIGURAÇÕES — um só ritmo de espaçamento
   --------------------------------------------------------------------------
   O modal cresceu por partes: cada aba nova herdou o espaçamento da anterior e
   nenhuma seguia a mesma régua. O resultado era campo colado em campo numa aba
   e sobrando ar em outra — o tipo de coisa que a pessoa não sabe nomear, mas
   sente como "meio torto".

   A régua, e vale para todas as abas:
     · 18px entre um bloco e o próximo
     · 14px entre campos de um mesmo formulário
     · 22px acima de um subtítulo, 10px abaixo
     · 6px entre o rótulo e o campo dele
   ========================================================================== */
.cfg-aba { display: block; }
.cfg-aba > .grid,
.cfg-aba > .acao-linha { margin-bottom: 18px; }
.cfg-aba > .grid:last-child,
.cfg-aba > .acao-linha:last-child { margin-bottom: 0; }

/* dentro de uma grade de campos, o respiro é menor: são irmãos */
.cfg-aba .grid { gap: 14px; }
.cfg-aba .field { display: grid; gap: 6px; align-content: start; }
.cfg-aba .field > label {
  font-size: 12px; font-weight: 650; color: var(--ink-2); letter-spacing: -.005em;
}

/* subtítulo separa assunto: precisa de mais ar em cima que embaixo, senão ele
   parece pertencer ao bloco anterior em vez de abrir o próximo */
.cfg-aba .sub-tit { margin: 22px 0 10px; }
.cfg-aba .sub-tit:first-child { margin-top: 0; }

/* botão logo depois de um formulário não pode ficar colado no último campo */
.cfg-aba .acao-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cfg-aba .grid + .acao-linha,
.cfg-aba .field + .acao-linha { margin-top: 16px; }
.cfg-aba > .btn { margin-top: 16px; }

/* as linhas de interruptor já têm a própria divisória; o que faltava era o
   primeiro item não encostar no subtítulo */
.cfg-aba .sub-tit + .opt-linha { padding-top: 4px; }

/* dica e aviso ficam presos ao que explicam, não flutuando entre blocos */
.cfg-aba .dica,
.cfg-aba .cfg-dica { margin: 8px 0 0; }
.cfg-aba .campo-dica { margin-top: 5px; }

/* a lista da equipe respira igual aos outros blocos */
.cfg-aba .eq-lista { margin-top: 2px; }
.cfg-aba .chave-caixa { margin-bottom: 2px; }

/* aviso embaixo de um campo específico, quando o servidor recusa o valor */
.campo-erro {
  display: block; font-size: 11.5px; font-weight: 550; color: var(--danger); margin-top: 4px;
}
.field.erro input, .field.erro select { border-color: var(--danger); }

/* ==========================================================================
   LOGS E REGISTROS
   --------------------------------------------------------------------------
   Uma lista densa que se lê de cima para baixo em três segundos: ícone do que
   é, a frase, quando, e a ação. A coluna do tempo à direita e alinhada é o que
   permite varrer a coluna com o olho sem ler o resto.
   ========================================================================== */
.lg-modal .modal-b { padding: 0; display: flex; flex-direction: column; min-height: 0; }

.lg-barra {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line-2);
}
.lg-busca { flex: 1; min-width: 200px; position: relative; }
.lg-busca > .bi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--muted); pointer-events: none;
}
.lg-busca input { width: 100%; padding-left: 34px; }
.lg-sel { width: auto; min-width: 132px; flex: none; }

.lg-pessoas {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--line-2); background: var(--bg);
}
.lg-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: all .13s;
}
.lg-selo:hover { border-color: var(--borda-forte); color: var(--ink); }
.lg-selo.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.lg-selo span {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.lg-selo.on span { background: var(--brand); color: #fff; }
.lg-vc { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11.5px; }

/* a lista rola, o resto do modal fica parado */
.lg-lista { overflow-y: auto; max-height: 52vh; min-height: 160px; }
.lg-tab { width: 100%; border-collapse: collapse; }
.lg-tab td {
  padding: 11px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
}
.lg-tab tr:last-child td { border-bottom: 0; }
.lg-tab tr:hover { background: var(--bg); }
body.dark .lg-tab tr:hover { background: rgba(255,255,255,.028); }

.lg-ic { width: 44px; padding-left: 20px !important; }
.lg-ic .bi {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand); font-size: 13px;
}
.lg-txt { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lg-txt b { color: var(--ink); font-weight: 650; }
.lg-alvo { color: var(--ink); font-weight: 600; }
.lg-extra { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lg-quando {
  width: 108px; text-align: right; white-space: nowrap;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.lg-acao { width: 104px; text-align: right; padding-right: 20px !important; }

.lg-vazio { padding: 44px 20px; text-align: center; font-size: 13px; color: var(--muted); }
.lg-pe {
  padding: 11px 20px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--muted); background: var(--bg);
}

/* --- o e-mail reaberto ---------------------------------------------------- */
.lg-cab { display: grid; gap: 7px; padding: 18px 20px 14px; }
.lg-par { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.lg-par span { width: 96px; flex: none; color: var(--muted); font-size: 12px; }
.lg-par b { font-weight: 600; color: var(--ink); word-break: break-word; }
.lg-corpo-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 0 20px 8px; border-bottom: 1px solid var(--line-2);
}
.lg-frame {
  width: 100%; height: 46vh; border: 0; background: #fff; display: block;
}

/* --- o "De:" do modal de e-mail ------------------------------------------
   Campo só de leitura tem de PARECER só de leitura: fundo levemente afundado
   e texto em cinza. Sem isso a pessoa clica, o cursor pisca, ela tenta digitar
   e nada acontece — e conclui que o sistema travou. */
.em-de { margin-bottom: 2px; }
.em-de input[readonly] {
  background: var(--bg); color: var(--ink-2); cursor: default;
  border-style: dashed;
}
.em-de input[readonly]:focus { border-color: var(--line); box-shadow: none; }

/* ==========================================================================
   INTEGRAÇÕES
   --------------------------------------------------------------------------
   Duas caixas na mesma aba. A de cima guarda uma credencial e por isso tem
   moldura própria: o olho precisa saber que aquilo ali é diferente do resto
   do formulário e não é para sair copiando à toa.
   ========================================================================== */

/* o "Como configurar" ao lado do título da seção */
.cfg-help {
  float: right; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--panel); color: var(--brand);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  transition: border-color .13s, background .13s;
  letter-spacing: 0; text-transform: none;
}
.cfg-help:hover { border-color: var(--brand); background: var(--brand-soft); }
.cfg-help .bi { font-size: 12px; }

.rot-opc {
  font-weight: 500; font-size: 10.5px; color: var(--muted);
  background: var(--line-2); padding: 1px 6px; border-radius: 999px; margin-left: 6px;
}
.sub-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 9px;
}

/* --- a caixa do endereço de entrada -------------------------------------- */
.int-cx {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); padding: 14px 16px; margin-top: 12px;
}
body.dark .int-cx { background: rgba(255,255,255,.02); }
.int-cx-topo { display: flex; align-items: center; gap: 14px; }
.int-cx-topo > div { flex: 1; min-width: 0; }
.int-cx-topo b { display: block; font-size: 13px; color: var(--ink); }
.int-cx-topo small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.int-url { display: flex; gap: 8px; margin-top: 12px; }
.int-url input {
  flex: 1; min-width: 0; height: var(--h);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--panel); color: var(--ink-2);
  border: 1px dashed var(--borda); border-radius: var(--radius-sm); padding: 0 12px;
}
.int-url input:focus { outline: none; border-color: var(--brand); color: var(--ink); }
.int-url .btn { flex: none; }

.int-cx .acao-linha { margin-top: 12px; }
.int-nota {
  font-size: 11.5px; color: var(--ink-2); margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
}
.int-nota .bi { color: var(--green); }

/* --- as etiquetas de evento ---------------------------------------------- */
.int-eventos { display: flex; flex-wrap: wrap; gap: 8px; }
.int-ev {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: all .13s; user-select: none;
}
.int-ev:hover { border-color: var(--borda-forte); color: var(--ink); }
.int-ev input { width: 14px; height: 14px; accent-color: var(--brand); margin: 0; }
.int-ev.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* --- a linha de estado --------------------------------------------------- */
.int-estado { margin-top: 12px; min-height: 20px; }
.int-sit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line-2);
}
.int-sit.bom  { color: #0a7a5a; background: var(--green-soft);  border-color: transparent; }
.int-sit.ruim { color: #b42318; background: var(--danger-soft); border-color: transparent; }
body.dark .int-sit.bom  { color: #34d399; }
body.dark .int-sit.ruim { color: #fca5a5; }

/* ==========================================================================
   O MANUAL DENTRO DO MODAL
   --------------------------------------------------------------------------
   Texto de instrução é o único lugar do painel onde eu deixo a linha ficar
   larga e o entrelinha crescer: a pessoa está LENDO, não varrendo. Densidade
   aqui atrapalha.
   ========================================================================== */
.modal.modal-b-med { max-width: 660px; }
.man { max-height: 66vh; line-height: 1.65; font-size: 13px; color: var(--ink-2); }
.man-abre { font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.man b { color: var(--ink); font-weight: 600; }

.man-bloco {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.man-tit {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 9px;
}
.man-tit .bi { color: var(--brand-2); font-size: 14px; }

.man-passos { margin: 0 0 0 4px; padding: 0; list-style: none; counter-reset: p; }
.man-passos li {
  position: relative; padding: 4px 0 4px 30px; counter-increment: p;
}
.man-passos li::before {
  content: counter(p);
  position: absolute; left: 0; top: 5px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.man-lista { margin: 0; padding-left: 18px; }
.man-lista li { padding: 3px 0; }

.man-cod {
  background: var(--sidebar); color: #cbd5e1;
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 9px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.man code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--line-2); color: var(--ink); padding: 1px 5px; border-radius: 5px;
}
.man-nota {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--bg); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 13px; margin-top: 10px; font-size: 12.5px;
}
body.dark .man-nota { background: rgba(255,255,255,.03); }
.man-nota .bi { color: var(--brand-2); margin-top: 2px; flex: none; }

/* --- a tabela de últimos envios ------------------------------------------
   Chama-se `tab-mini` e NÃO `tab` de propósito. Já existe um `.tab` no
   listas.css, e redefinir o mesmo seletor em duas folhas é exatamente o erro
   que quebrou o cabeçalho das tabelas do admin: quem vence passa a depender da
   ordem das tags <link>, que ninguém lembra de conferir. Nome próprio, zero
   colisão. */
.tab-rolo { max-height: 58vh; overflow-y: auto; }
.tab-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tab-mini th {
  text-align: left; padding: 9px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.tab-mini td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tab-mini tr:last-child td { border-bottom: 0; }
.tab-mini td.vazio { text-align: center; color: var(--muted); padding: 30px 10px; }
.tab-mini code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--line-2); padding: 2px 6px; border-radius: 5px; color: var(--ink-2);
}
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pill-ok  { background: var(--green-soft);  color: #0a7a5a; }
.pill-err { background: var(--danger-soft); color: #b42318; }
body.dark .pill-ok  { color: #34d399; }
body.dark .pill-err { color: #fca5a5; }

/* ==========================================================================
   CELULAR E TABLET EM PÉ — 900px para baixo
   --------------------------------------------------------------------------
   Um bloco só, no fim do arquivo, e NADA daqui vaza para o computador: tudo
   está dentro da media query. Foi escrito olhando o painel num iPhone de
   verdade (390 × 844), não imaginando.

   O QUE ESTAVA QUEBRADO, medido:

   1. A SIDEBAR CONTINUAVA UMA COLUNA PRETA DE 72px, comendo 18% da largura.
      A regra que a deitava existia desde sempre em `@media (max-width:900px)`,
      mas perdia para `body.recolhido .app` — que tem especificidade (0,2,1)
      contra (0,1,0) e vence independentemente da ordem. E o editor SEMPRE
      escreve `class="recolhido"` no body. Media query não sobrepõe
      especificidade: essa é a armadilha, e é por isso que a correção abaixo
      repete o seletor `body.recolhido`.

   2. A BARRA DO TOPO MEDIA 596px numa tela de 390. Três botões com texto
      ("Preencher exemplo", "Limpar", "Enviar e-mail", "Download") não cabem
      lado a lado em celular nenhum. O documento rolava de lado inteiro:
      scrollWidth 693px.

   3. OS CAMPOS herdavam `grid-template-columns: 132px minmax(0,1fr)` do
      recorte de 900px. Em 390px isso deixa 210px para o campo — o CNPJ saía
      cortado em "00.000.00" e o rótulo "Nome ou nome fantasia" quebrava em
      duas linhas em cima de um campo apertado.

   REGRAS QUE VALEM AQUI:
   · Uma coluna, salvo par que cabe de verdade (CEP+UF, quantidade+unidade).
   · Input com 16px, sempre. Abaixo disso o Safari do iPhone dá zoom sozinho
     ao focar, e a página nunca mais volta ao lugar.
   · Alvo de toque de 44px nos botões que a pessoa usa com o polegar.
   · Nada de tooltip: não existe hover em toque, e o que era dica vira sujeira.
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- alturas e corpo de texto ---------------------------------------- */
  :root {
    --gut: 14px;      /* a goteira de 24px come 48px de uma tela de 390 */
    --h: 44px;        /* alvo de toque decente */
    --h-sm: 38px;
  }

  /* ======================================================================
     1. A BARRA DE NAVEGAÇÃO
     ---------------------------------------------------------------------
     Deita no topo, rola de lado se precisar, e a marca encolhe. O seletor
     repete `body.recolhido` de propósito — ver a nota 1 lá em cima.
     ====================================================================== */
  .app, body.recolhido .app {
    grid-template-columns: minmax(0, 1fr);   /* NÃO `1fr`: item de grade tem
       min-width auto, e basta um filho largo demais (um selo com mensagem de
       erro, uma tabela) para a coluna inteira esticar e levar a página junto.
       `minmax(0, 1fr)` é o cinto de segurança contra essa classe de bug. */
    grid-template-rows: auto 1fr;
    height: auto; overflow: visible;
  }
  .main { min-width: 0; }
  .topbar { min-width: 0; }
  .topbar-tit { max-width: 100%; }
  /* `.ed-palco` fica FORA desta lista de propósito. Eu o tinha incluído, e o
     resultado só aparecia depois de preencher o orçamento: a folha A4 tem
     794px de largura de layout, o `transform: scale` do zoom encolhe o que se
     vê mas NÃO encolhe a caixa, e sem overflow para conter ela empurrava a
     página inteira para 830px — arrastando a barra do topo junto. O sintoma
     ("a barra quebrou") ficava longe da causa (o papel). */
  .main, .ed-form { overflow: visible; }

  /* A altura da barra é FIXA e vira variável: a barra de título gruda logo
     abaixo dela, e um número mágico repetido em dois lugares é um número que
     um dia deixa de bater. */
  :root { --barra-h: 56px; }
  .sidebar, body.recolhido .sidebar {
    position: sticky; top: 0; height: var(--barra-h);
    flex-direction: row; align-items: center; gap: 2px;
    padding: 7px 10px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  /* A marca: só o símbolo, e menor. O lockup com o nome por extenso é o que
     empurrava os ícones para fora e quebrava a linha do topo. */
  .brand, body.recolhido .brand {
    padding: 0 10px 0 2px; margin-right: 4px; flex: none;
    border-right: 1px solid rgba(255,255,255,.10);
  }
  .brand-cheia { display: none; }
  .brand-mark, body.recolhido .brand-mark { display: block; width: 26px; height: 28px; }
  .brand-text { display: none; }

  .sidebar .nav, body.recolhido .sidebar .nav {
    flex-direction: row; margin: 0; gap: 2px; flex: none;
  }
  .nav-item span, .nav-sep { display: none; }
  .nav-item, body.recolhido .nav-item {
    width: 42px; height: 42px; padding: 0; justify-content: center; flex: none;
  }
  .nav-item i { font-size: 19px; }
  /* a marca do item ativo desce para baixo do ícone: a barrinha lateral não
     faz sentido nenhum numa barra deitada */
  .nav-item.active::before {
    left: 50%; top: auto; bottom: 2px; transform: translateX(-50%);
    width: 18px; height: 2.5px; border-radius: 3px 3px 0 0;
  }

  .sidebar-foot, body.recolhido .sidebar-foot {
    margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 2px; flex: none;
  }
  .foot-btn span { display: none; }
  #btnCollapse { display: none; }          /* não há o que recolher aqui */
  .eu-txt, .eu-seta { display: none; }
  .eu, body.recolhido .eu { padding: 0; width: 42px; justify-content: center; }
  .eu-av { width: 30px; height: 30px; font-size: 12px; }
  /* O menu do usuário sai ancorado à DIREITA e para BAIXO. Numa barra deitada
     no topo, `menu--cima` abriria para cima e para fora da tela — e a variante
     `body.recolhido .menu--cima` (que joga o menu para o lado direito da coluna)
     jogaria ele inteiro para fora da largura. Os dois seletores precisam ser
     repetidos aqui pelo mesmo motivo de especificidade da nota 1. */
  .menu--cima, body.recolhido .menu--cima {
    top: calc(100% + 8px); bottom: auto; right: 0; left: auto;
    min-width: 0; width: min(300px, calc(100vw - 20px));
  }
  .menu { max-height: calc(100vh - 120px); overflow-y: auto; }

  /* ======================================================================
     2. A BARRA DE TÍTULO E AS AÇÕES
     ---------------------------------------------------------------------
     Duas fileiras: o título sozinho na primeira, com reticências; as ações
     na segunda, numa tira que rola. Espremer sete controles numa linha só
     seria trocar "não cabe" por "não dá para acertar com o dedo".
     ====================================================================== */
  /* A barra de título gruda ABAIXO da navegação, e não em cima dela.
     -----------------------------------------------------------------------
     As duas são `position: sticky; top: 0`, e a navegação tem z-index 60
     contra os 30 da barra de título. Resultado: bastava rolar um pouco e a
     faixa escura passava POR CIMA de "Novo orçamento". No computador isso
     nunca apareceu porque lá a navegação é uma coluna lateral. */
  .topbar {
    top: var(--barra-h);
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 9px var(--gut) 9px;
  }
  .topbar-tit { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .page-title {
    font-size: 16.5px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .page-sub { display: none; }

  .topbar-right {
    display: flex; flex-wrap: wrap; gap: 7px; min-width: 0;
  }
  .topbar-right > * { flex: none; }
  .topbar-right .btn { height: 40px; padding: 0 13px; font-size: 13px; }

  /* O SELO GANHA A LINHA INTEIRA, embaixo dos botões, e o texto QUEBRA.
     -----------------------------------------------------------------------
     Este é o bug mais escorregadio que apareceu na revisão, porque ele só
     aparecia depois de uma AÇÃO: o `#selSalvo` não mostra só "salvo" — ele
     também carrega mensagem de erro. "Já existe um orçamento com o código
     ORC-2026-0042 nesta empresa. Use outro." vira uma pílula de 500px com
     `white-space: nowrap`, e como item de grade tem `min-width: auto`, ela
     esticava `.main` → `.topbar` → a página inteira para 827px. O sintoma que
     se vê é "a barra do topo quebrou"; a causa estava a três elementos de
     distância. Truncar com reticências seria pior: esconde justamente a frase
     que explica o que deu errado. Então ela desce e quebra em linhas. */
  .topbar-right .selo {
    order: 9; flex: 1 1 100%; min-width: 0; max-width: 100%;
    white-space: normal; line-height: 1.4; text-align: left;
  }

  /* Os dois secundários viram só ícone. "Preencher exemplo" e "Limpar" são
     usados uma vez cada; Download e Enviar são o motivo de a barra existir e
     mantêm o texto. */
  /* O rótulo está num <span class="btn-rot"> só para isto: sem o span, o texto
     é um nó solto dentro do <button> e não há como escondê-lo por CSS. */
  #btnExemplo .btn-rot, #btnLimpar .btn-rot { display: none; }
  #btnExemplo, #btnLimpar { width: 40px; padding: 0; }
  #btnExemplo .bi, #btnLimpar .bi { margin: 0; }
  #btnEmail .so-pc { display: none; }      /* "Enviar e-mail" vira "Enviar" */
  #btnDownload .cs { display: none; }

  /* ======================================================================
     3. O FORMULÁRIO — uma coluna, com as exceções que cabem
     ====================================================================== */
  .ed-form { padding: 12px var(--gut) 40px; gap: 11px; }
  .card-b { padding: 13px; }
  .card-h { padding: 11px 13px; }
  /* a dica do cabeçalho some: em duas linhas ela empurra o título do card e
     não informa nada que o campo abaixo já não diga */
  .card-dica { display: none; }

  .grid { gap: 10px; }
  .g2, .g3, .g-2-1, .g-emp1, .g-num-datas, .g-smtp,
  .g-razao-resp, .g-fone-email, .g-prazo, .g-pag-cond,
  .g-emp-nome, .g-emp-contato, .g-emp-num, .g-emp-pix, .g-em-topo {
    grid-template-columns: 1fr;
  }
  /* ---- O ENDEREÇO, remontado ------------------------------------------
     Empilhar tudo funcionava mas custava seis fileiras para seis campos —
     e três deles (CEP, Nº, UF) têm largura conhecida e não precisam de uma
     linha inteira. Reagrupados por TAMANHO DO DADO, viram quatro:

        [ CEP ........ ] [ Nº ]
        [ Logradouro .......... ]
        [ Bairro .............. ]
        [ Cidade ..... ] [ UF ]

     Os campos são posicionados por :nth-child porque não têm classe própria;
     a ordem no HTML é CEP, Logradouro, Nº — e é justamente por isso que
     precisam ser reordenados aqui em vez de simplesmente empilhados. */
  .g-cep { grid-template-columns: minmax(0, 1fr) 96px; }
  .g-cep > :nth-child(1) { grid-column: 1; grid-row: 1; }        /* CEP */
  .g-cep > :nth-child(3) { grid-column: 2; grid-row: 1; }        /* Nº */
  .g-cep > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }   /* Logradouro */

  .g-cidade { grid-template-columns: minmax(0, 1fr) 92px; }
  .g-cidade > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; } /* Bairro */
  .g-cidade > :nth-child(2) { grid-column: 1; grid-row: 2; }      /* Cidade */
  .g-cidade > :nth-child(3) { grid-column: 2; grid-row: 2; }      /* UF */

  /* o pé dos itens: botão em cima, soma embaixo e alinhada à direita.
     Lado a lado em 390px eles se espremem e a soma — que é o número que a
     pessoa confere — fica com menos destaque que o botão. */
  .itens-pe { flex-wrap: wrap; gap: 10px; }
  .itens-pe .btn { width: 100%; justify-content: center; }
  .itens-pe-tot { width: 100%; justify-content: flex-end; }
  .campo-acao { grid-template-columns: 1fr; gap: 9px; }
  .campo-acao .btn { width: 100%; height: var(--h); }

  /* 16px NÃO é escolha de estilo: abaixo disso o Safari do iPhone dá zoom
     sozinho quando o campo recebe foco, e a pessoa fica com a página torta
     pelo resto da sessão. */
  .field input, .field select, .field textarea { font-size: 16px; }
  .field label { font-size: 12px; }
  .field textarea { min-height: 84px; }

  /* ======================================================================
     4. A LINHA DO ITEM — quatro fileiras
     ---------------------------------------------------------------------
       [nº]                                   [dup] [del]
        nome ...............................................
        descrição ..........................................
        qtd    un      valor
        cobrança .................            total
     A coluna do número e das ações vira uma faixa no alto: em 390px ela
     custava 34px de largura permanentes para mostrar "3".
     ====================================================================== */
  .itens-cab { display: none; }
  .item-linha {
    /* 54 para a quantidade (é 1, 2 ou 8) e 92 para a unidade, que é TEXTO:
       com 62px a palavra "mês" saía como "mé" e "diária" como "diár". */
    grid-template-columns: 54px 92px minmax(0, 1fr);
    grid-template-areas:
      "lado lado lado"
      "nome nome nome"
      "desc desc desc"
      "qtd  un   valor"
      "cob  cob  total";
    gap: 8px; padding: 12px 13px;
  }
  .item-lado {
    grid-area: lado; flex-direction: row; align-items: center;
    justify-content: space-between; padding: 0; gap: 6px;
  }
  .item-n { padding: 0; font-size: 12px; }
  /* sem hover no toque: os ícones ficam sempre visíveis, ou viram invisíveis
     para sempre */
  .item-ic { opacity: 1; width: 32px; height: 32px; font-size: 13px; }
  .item-lado .item-ic:first-of-type { margin-left: auto; }

  .item-linha input, .item-linha select { height: 42px; font-size: 16px; }
  .item-linha > [data-c="qtd"] { padding: 0; }
  .item-desc, .item-cob { height: 40px !important; font-size: 15px !important; }
  .item-total { height: 42px !important; font-size: 15px !important; }

  /* ======================================================================
     5. TOTAIS E O PAPEL
     ====================================================================== */
  .val-grade { grid-template-columns: 1fr; }
  .val-grade > .val-total { grid-column: 1 / -1; }

  .prev-topo { padding: 10px var(--gut); gap: 10px; }
  .prev-ctrl { width: 100%; justify-content: space-between; gap: 8px; }
  .modelos-tira { width: 100%; flex: 1 1 100%; }
  .modelo-card { width: 60px; }
  .modelo-mini { height: 40px; }
  .zoom-grupo { flex: none; }
  /* O papel vira uma janela com rolagem própria em vez de esticar a página.
     72vh porque a folha precisa caber alta o suficiente para valer a pena
     olhar, e baixa o suficiente para não parecer que o formulário acabou. */
  .ed-palco {
    padding: 14px var(--gut) 20px;
    max-height: 72vh; overflow: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .ed-preview { border-top: 1px solid var(--line); }

  /* ======================================================================
     6. MODAIS
     ---------------------------------------------------------------------
     Em celular um modal centralizado com margem em volta desperdiça a
     única coisa escassa: altura. Ele encosta nas bordas e rola por dentro.
     ====================================================================== */
  .modal, .modal.modal-sm, .modal.modal-b-med, .modal--lg {
    width: calc(100vw - 16px); max-width: none; max-height: calc(100vh - 16px);
  }
  .modal-b { padding: 15px; }
  .modal-h { padding: 14px 15px; }
  .modal-f { padding: 12px 15px; flex-wrap: wrap; gap: 8px; }
  .modal-f .btn { flex: 1 1 auto; min-width: 130px; }
  .modal-f .sep { display: none; }

  .modal-b--duplo { grid-template-columns: 1fr; }
  /* as abas das configurações viram uma tira que rola, não uma lista alta
     que engole meia tela antes de a pessoa ver qualquer campo */
  .duplo-lista.duplo-abas {
    display: flex; flex-direction: row; gap: 4px; max-height: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 9px 12px;
    scrollbar-width: none;
  }
  .duplo-lista.duplo-abas::-webkit-scrollbar { display: none; }
  .duplo-abas button { flex: none; white-space: nowrap; font-size: 12.5px; padding: 8px 12px; }
  .duplo-form { padding: 14px; }

  /* ---- integrações ------------------------------------------------------ */
  .int-cx-topo { flex-wrap: wrap; }
  .int-url { flex-direction: column; }
  .int-url .btn { width: 100%; }
  .cfg-help { float: none; display: inline-flex; margin-left: 8px; }
  .man-cod { font-size: 10.5px; }
  .acao-linha { flex-wrap: wrap; gap: 8px; }
  .acao-linha .btn { flex: 1 1 auto; min-width: 132px; }

  /* ---- nada de tooltip no toque ----------------------------------------- */
  #dica { display: none !important; }
}

/* Telas muito estreitas (iPhone SE, 320–360px): o par CEP+UF também desiste. */
@media (max-width: 360px) {
  .g-cep { grid-template-columns: 1fr; }
  .item-linha {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lado lado" "nome nome" "desc desc" "qtd un" "valor valor" "cob cob" "total total";
  }
  .topbar-right .btn { font-size: 12.5px; padding: 0 11px; }

  /* Em 320px a barra do papel não cabe numa linha: o seletor A4/Celular mais
     o grupo de zoom dão 336px. Eles quebram, e a tira de modelos ganha
     `min-width: 0` para o `overflow-x: auto` dela voltar a valer. */
  .prev-ctrl { flex-wrap: wrap; row-gap: 8px; }
  .prev-ctrl .zoom-grupo { margin-left: auto; }
  .modelos-tira { min-width: 0; }
  .modelo-card { width: 54px; }
}

/* ==========================================================================
   RECURSOS EXCLUSIVOS
   --------------------------------------------------------------------------
   A única tela do painel que VENDE em vez de operar, e ela precisa parecer
   isso antes de ser lida. Três decisões:

   1. TOPO ESCURO E ALTO, com a marca. É a quebra de ritmo que faz a pessoa
      parar de trabalhar e começar a ler. Nenhum outro modal do produto se
      permite isso — e é justamente por ser o único que ele funciona.
   2. O OURO DA MARCA (#ED6D02 → #FBCC02) aparece em três lugares: o item do
      menu, o fio abaixo do topo e o botão de enviar. Só. O azul continua sendo
      a cor de "operar"; o ouro é a cor de "isto é diferente".
   3. NADA DE CAIXA CINZA nos dois cartões — hairline e ícone com fundo suave.
      Bloco cinza é a assinatura de formulário genérico, que é exatamente o que
      esta tela não pode parecer.
   ========================================================================== */

/* --- o item na barra lateral --------------------------------------------- */
.foot-btn--ouro { color: #f5c877; }
.foot-btn--ouro i { color: var(--laranja-2); }
.foot-btn--ouro:hover {
  background: linear-gradient(90deg, rgba(237,109,2,.20), rgba(251,204,2,.07));
  color: #fff;
}
.foot-btn--ouro:hover i { transform: rotate(-14deg) scale(1.18); color: #ffd84d; }
/* recolhida, a barra mostra só ícones — o de varinha ganha um ponto de cor
   para não sumir no meio dos outros */
body.recolhido .foot-btn--ouro { position: relative; }
body.recolhido .foot-btn--ouro::after {
  content: ''; position: absolute; top: 7px; right: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--laranja-2); box-shadow: 0 0 0 2px var(--sidebar);
}

/* --- o modal -------------------------------------------------------------- */
.ex-modal { max-width: 660px; overflow: hidden; }

.ex-topo {
  position: relative; padding: 26px 28px 22px;
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(237,109,2,.34) 0%, transparent 58%),
    linear-gradient(160deg, #131c31 0%, #0b1220 100%);
  color: #fff; text-align: left;
}
/* o fio de ouro que separa o topo do formulário */
.ex-topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-2), var(--laranja));
}
.ex-x {
  position: absolute; top: 14px; right: 14px;
  color: rgba(255,255,255,.55); background: none; border: 0;
}
.ex-x:hover { color: #fff; background: rgba(255,255,255,.12); }

.ex-marca { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.ex-marca img { width: 26px; height: 28px; object-fit: contain; }
.ex-marca span {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.ex-tit {
  font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  color: #fff; margin: 0;
}
.ex-sub {
  font-size: 14px; line-height: 1.6; color: #b6c4dc; margin: 7px 0 0; max-width: 46ch;
}
.ex-sub b { color: #fff; font-weight: 700; }

/* --- os dois cartões ------------------------------------------------------ */
.ex-corpo { max-height: 58vh; }
.ex-cards { display: grid; gap: 12px; }
.ex-card {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.ex-card:hover { border-color: var(--borda); }
.ex-ic {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px; font-size: 16px;
  background: linear-gradient(140deg, rgba(251,204,2,.20), rgba(237,109,2,.16));
  color: var(--laranja);
}
.ex-card b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.ex-card small {
  display: block; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.ex-card small b { display: inline; font-size: inherit; }

/* --- o separador com texto no meio ---------------------------------------- */
.ex-sep {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.ex-sep::before, .ex-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line-2);
}

/* 118px e não 150: com o editor alto demais, os campos de nome e WhatsApp
   ficavam empurrados para debaixo do rodapé fixo e a pessoa só os via depois
   de rolar — num formulário de cinco linhas, ter de rolar é perder gente. */
.ex-msg { min-height: 118px; max-height: 240px; }
.ex-corpo { padding-bottom: 18px; }
.ex-quem { margin-top: 14px; }

.campo-dica--alerta { color: var(--amber); font-weight: 600; }
.campo-dica--ok { color: #0a7a5a; font-weight: 600; }
body.dark .campo-dica--ok { color: #34d399; }

.ex-estado { margin-top: 12px; min-height: 0; }
.ex-sit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px;
}
.ex-sit.bom  { color: #0a7a5a; background: var(--green-soft); }
.ex-sit.ruim { color: #b42318; background: var(--danger-soft); }
body.dark .ex-sit.bom  { color: #34d399; }
body.dark .ex-sit.ruim { color: #fca5a5; }

/* --- o rodapé e o botão de ouro ------------------------------------------- */
.ex-pe { gap: 12px; }
.ex-pe-nota {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.ex-pe-nota .bi { color: var(--green); font-size: 13px; }

.btn-ouro {
  background: linear-gradient(135deg, var(--laranja), #ff9d1f);
  color: #fff; border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(237,109,2,.75);
}
.btn-ouro:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7a10, var(--laranja-2));
  color: #3a1a00; box-shadow: 0 8px 22px -8px rgba(237,109,2,.9);
}
.btn-ouro:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* --- a tela de "enviado" -------------------------------------------------- */
.ex-ok, .ex-pe-ok { display: none; }
.ex-modal.ex-pronto .ex-corpo,
.ex-modal.ex-pronto .ex-pe { display: none; }
.ex-modal.ex-pronto .ex-ok { display: block; }
.ex-modal.ex-pronto .ex-pe-ok { display: flex; }

.ex-ok { text-align: center; padding: 34px 30px 26px; }
.ex-ok-ic {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: var(--laranja);
  background: linear-gradient(140deg, rgba(251,204,2,.22), rgba(237,109,2,.18));
}
.ex-ok h3 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 10px; }
.ex-ok p {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 44ch; margin: 0 auto;
}
.ex-ok-p2 { margin-top: 10px !important; color: var(--muted); font-size: 12.5px; }

@media (max-width: 900px) {
  .ex-topo { padding: 20px 18px 18px; }
  .ex-tit { font-size: 21px; }
  .ex-corpo { max-height: none; }
  .ex-pe { flex-wrap: wrap; }
  .ex-pe-nota { flex: 1 1 100%; order: 9; }
  .ex-pe .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   APLICATIVO INSTALÁVEL (PWA)
   ========================================================================== */

/* --- o botão de instalar, na barra lateral -------------------------------- */
.foot-btn--instalar { color: #9fd4c0; }
.foot-btn--instalar i { color: var(--green); }
.foot-btn--instalar:hover { background: rgba(16,185,129,.14); color: #fff; }
.foot-btn--instalar:hover i { transform: translateY(2px) scale(1.14); }

/* --- a faixa de "saiu versão nova" ---------------------------------------
   Embaixo e discreta. Atualização não é urgência: interromper com um modal o
   trabalho de quem está no meio de um orçamento seria trocar um incômodo
   pequeno (versão velha) por um grande (perder o fio). */
.pwa-faixa {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 90px);
  z-index: 400; display: flex; align-items: center; gap: 11px;
  padding: 11px 12px 11px 16px; border-radius: 999px;
  background: var(--sidebar); color: #e6edf7;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
  font-size: 13px; opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .26s;
  max-width: calc(100vw - 24px);
}
.pwa-faixa.on { transform: translate(-50%, 0); opacity: 1; }
.pwa-faixa > .bi { color: var(--brand-2); font-size: 15px; flex: none; }
.pwa-faixa span { flex: 1; min-width: 0; }
.pwa-bt {
  flex: none; border: 0; border-radius: 999px; cursor: pointer;
  padding: 7px 15px; background: var(--brand); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.pwa-bt:hover { background: var(--brand-2); }
.pwa-x {
  flex: none; border: 0; background: none; cursor: pointer; color: #7f93b4;
  font-size: 19px; line-height: 1; padding: 0 4px;
}
.pwa-x:hover { color: #fff; }

/* --- rodando instalado ----------------------------------------------------
   Com `apple-mobile-web-app-status-bar-style: black-translucent` o conteúdo
   sobe por baixo do relógio e da bateria. Sem respeitar a safe-area, o
   primeiro item do menu fica escondido atrás do horário. */
body.app-instalado .sidebar {
  padding-top: calc(7px + env(safe-area-inset-top));
  height: calc(var(--barra-h, 56px) + env(safe-area-inset-top));
}
body.app-instalado .ed-form { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
body.app-instalado .pwa-faixa { bottom: calc(18px + env(safe-area-inset-bottom)); }
body.app-instalado .modal-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

@media (min-width: 901px) {
  /* no computador a barra é a coluna da esquerda: a safe-area do topo não se
     aplica, e herdar a altura do celular achataria o menu inteiro */
  body.app-instalado .sidebar { height: 100vh; padding-top: 20px; }
}