/* ==========================================================================
   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 ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns .2s; }
body.recolhido .app { grid-template-columns: 72px 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;
}
.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; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; }
/* ---------- 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; }
.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);
  grid-template-columns: 34px 1fr 50px 104px 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) {
  .editor { grid-template-columns: 1fr; }
  .app { height: auto; overflow: visible; }
  .main, .ed-form, .ed-palco { overflow: visible; }
  .ed-preview { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center;
             padding: 8px 12px; overflow-x: auto; gap: 4px; }
  .sidebar .brand { padding: 0 10px 0 0; }
  .sidebar .nav { flex-direction: row; margin: 0; gap: 2px; }
  .nav-item span, .nav-sep { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; }
  .foot-btn span { display: none; }
  #btnCollapse { display: none; }
  .g2, .g3, .g-2-1, .g-cep, .g-cidade, .g-emp1, .g-num-datas, .g-smtp,
  .val-grade { grid-template-columns: 132px minmax(0,1fr); }
  .val-grade > .val-total { grid-column: 1 / -1; }
  .campo-acao { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .page-sub { display: none; }
  .modal-b--duplo { grid-template-columns: 1fr; }
  .duplo-lista { border-right: 0; border-bottom: 1px solid var(--line); max-height: 190px; }
}
@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; }
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; }