/* ============================================================
   Heeca Orçamento — base visual (design system "clean" da plataforma Heeca)
   Mesmos tokens do portal: fundo branco, quase-preto, bordas finas, cantos 6px,
   botão primário quase-preto, cor do produto (verde #0f8a5f) em títulos, aba
   ativa, filete do topo e links. Dinheiro usa preto; verde é marca, não significado.
   Os nomes das classes foram mantidos (o JS depende deles); só o visual mudou.
   ============================================================ */
:root {
  --papel: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f7f7f8;
  --tinta: #0a0a0a;
  --tinta-2: #6a6a6a;
  --tinta-3: #9a9a9e;
  --linha: #e3e3e6;
  --linha-forte: #cfcfd4;
  --marca: #0f8a5f;
  --marca-forte: #0b6b4a;
  --marca-suave: #e4f4ed;
  --primario: #0a0a0a;
  --primario-hover: #2e2e2e;
  --perigo: #d22f2f;
  --sucesso: #1a9c4b;
  --alerta: #c77a00;

  /* aliases dos nomes antigos usados em algumas regras */
  --espresso: var(--tinta);
  --verniz: var(--marca);
  --verniz-forte: var(--marca-forte);
  --serragem: var(--linha-forte);
  --serragem-clara: var(--superficie-2);

  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-corpo: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-ficha: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --raio: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--f-corpo); background: var(--papel); color: var(--tinta); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ---------- topo: branco, logo, estado da sincronização, sair, filete verde ---------- */
header.topo { background: var(--superficie); color: var(--tinta); position: sticky; top: 0; z-index: 40; }
.topo-linha { max-width: 1100px; margin: 0 auto; padding: 10px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.marca img { height: 30px; width: auto; display: block; }
.topo-dir { display: flex; align-items: center; gap: 12px; flex: none; }
.sinc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.sinc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.sinc[data-tipo="ok"] { color: var(--sucesso); }       .sinc[data-tipo="ok"]::before { background: var(--sucesso); }
.sinc[data-tipo="erro"] { color: var(--perigo); }      .sinc[data-tipo="erro"]::before { background: var(--perigo); }
.sinc[data-tipo="pendente"]::before { background: var(--alerta); animation: pulsar 1s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
button.sair { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--tinta-2); border: 1px solid var(--linha-forte); padding: 6px 10px; border-radius: var(--raio); font-size: 13px; font-weight: 500; font-family: var(--f-corpo); cursor: pointer; }
button.sair:hover { color: var(--tinta); border-color: var(--tinta); }
button.sair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filete { height: 3px; background: var(--marca); }
.empresa-topo { flex: 1; min-width: 0; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--linha); font-size: 13px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empresa-topo:empty { display: none; }
/* Faixa da assinatura (vem do portal): teste, pendência ou bloqueio */
.faixa-assinatura { max-width: 1100px; margin: 12px auto 0; padding: 9px 14px; border: 1px solid var(--linha); border-left: 3px solid var(--marca); border-radius: var(--raio); background: var(--superficie-2); font-size: 13px; color: var(--tinta-2); }
.faixa-assinatura[data-tipo="alerta"] { border-left-color: var(--alerta); }
.faixa-assinatura[data-tipo="erro"] { border-left-color: var(--perigo); color: var(--perigo); }
.faixa-assinatura a { color: var(--marca-forte); font-weight: 600; margin-left: 6px; }
body.bloqueado .faixa-assinatura { display: none; }
.btn-link { justify-content: center; text-decoration: none; }

nav.abas { max-width: 1100px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
nav.abas::-webkit-scrollbar { display: none; }
nav.abas button { flex: none; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--tinta-2); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px 9px; font-size: 14px; font-weight: 500; font-family: var(--f-corpo); cursor: pointer; white-space: nowrap; }
nav.abas button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
nav.abas button:hover { color: var(--tinta); }
nav.abas button.ativa { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }
nav.abas button.ativa svg { opacity: 1; }

main { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
section.aba { display: none; }
section.aba.ativa { display: block; }

/* ---------- cartões: borda fina, sem sombra; título com regra ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; margin-bottom: 16px; }
.cartao h2 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; color: var(--tinta); }
.cartao h3 { margin: 18px 0 8px; font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--tinta); }

.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
label, .rotulo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
input, select, textarea { padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); font-size: 14px; font-family: var(--f-corpo); width: 100%; background: var(--superficie); color: var(--tinta); font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(15, 138, 95, .18); }
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); font-weight: 400; }
.check input { width: auto; accent-color: var(--marca); }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
th { background: var(--superficie-2); color: var(--tinta-2); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; }
td input, td select { padding: 6px 8px; font-size: 14px; min-width: 90px; }
td select { min-width: 170px; }
td.cel-servico { min-width: 260px; }
td.cel-servico select { display: block; width: 100%; }
td.cel-servico .sel-produto { margin-top: 4px; }
td input[data-campo="descricao"], td input[data-campo="nome"], td input[data-campo="unidade"] { min-width: 140px; }
.tabela-rolagem { overflow-x: auto; }
td.escada-campos { white-space: nowrap; }
td.escada-campos .check { display: inline-flex; margin-right: 16px; font-size: 13px; }
td.escada-campos .check input[type="number"] { min-width: 0; }
td.escada-campos .check input[type="checkbox"] { min-width: 0; width: 18px; height: 18px; }
tr.linha-escada td:first-child { white-space: nowrap; }
tr.linha-escada td:first-child input { display: inline-block; width: auto; }
tr.total td { font-weight: 600; border-top: 2px solid var(--tinta); color: var(--tinta); }

/* ---------- botões: primário quase-preto; secundário com borda; perigo em texto ---------- */
button.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primario); color: #fff; border: 1px solid var(--primario); padding: 9px 16px; border-radius: var(--raio); font-size: 14px; font-weight: 500; font-family: var(--f-corpo); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
button.btn:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
button.btn:active { transform: translateY(1px); }
button.btn.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); }
button.btn.secundario:hover { background: var(--superficie); border-color: var(--tinta); }
button.btn.perigo { background: transparent; color: var(--perigo); border-color: transparent; }
button.btn.perigo:hover { background: #fdeaea; }
button.btn.pequeno { padding: 4px 9px; font-size: 12.5px; }
label.btn { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha-forte); padding: 9px 16px; border-radius: var(--raio); font-size: 14px; font-weight: 500; font-family: var(--f-corpo); cursor: pointer; }
label.btn:hover { border-color: var(--tinta); }
label.btn.pequeno { padding: 4px 9px; font-size: 12.5px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* ---------- resumo de totais: caixas claras, total em destaque na cor do produto ---------- */
.resumo-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.resumo-totais .caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.resumo-totais .caixa small { display: block; color: var(--tinta-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.resumo-totais .caixa strong { display: block; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta); margin-top: 4px; }
.resumo-totais .caixa.destaque { border-color: var(--marca); background: var(--marca-suave); }
.resumo-totais .caixa.destaque small { color: var(--marca-forte); }
.resumo-totais .caixa.destaque strong { color: var(--marca-forte); font-size: 24px; }

/* ---------- ícones nos botões / utilitários ---------- */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.btn svg, label.btn svg, .ico-btn { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button.btn.whatsapp { background: #25D366; border-color: #25D366; color: #073b1c; }
button.btn.whatsapp:hover { background: #1ebe5a; border-color: #1ebe5a; }
.acoes-principais { padding-top: 4px; }
.cartao h2 small { font-weight: 400; color: var(--tinta-2); font-size: 13px; margin-left: 8px; }
label small, .rotulo small { font-weight: 400; color: var(--tinta-3); font-size: 12px; }
.campo-largo { margin-top: 12px; }
th { white-space: nowrap; }
.rodape-app { max-width: 1100px; margin: 24px auto 32px; padding: 0 16px; font-size: 12px; color: var(--tinta-3); text-align: center; }
.painel-arquivo { display: flex; align-items: center; gap: 8px; }
.logo-empresa .acoes { margin-top: 6px; }
#emp-logo-preview { height: 56px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--linha); border-radius: var(--raio); padding: 4px; background: #fff; }

/* ---------- diversos ---------- */
.aviso { background: var(--superficie-2); border: 1px solid var(--linha); border-left: 3px solid var(--marca); border-radius: var(--raio); padding: 10px 12px; font-size: 13px; color: var(--tinta-2); margin-bottom: 12px; }
.vazio { color: var(--tinta-2); padding: 12px 0; }
.dica { margin: 0 0 8px; color: var(--tinta-2); font-size: 13px; }
.lista-servicos { display: flex; flex-direction: column; gap: 12px; }
.servico-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-forte); background: var(--marca-suave); border: 1px solid rgba(15, 138, 95, .3); border-radius: var(--raio); padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: var(--raio); border-left: 3px solid var(--marca); font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.mostrar { opacity: 1; }

/* ---------- login ---------- */
#tela-login { display: none; position: fixed; inset: 0; z-index: 100; background: var(--superficie-2); align-items: center; justify-content: center; padding: 20px; border-top: 3px solid var(--marca); }
body.bloqueado #tela-login { display: flex; }
body.bloqueado header.topo, body.bloqueado main { display: none; }
.login-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px 28px 24px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.login-caixa img { width: 140px; height: auto; }
.login-sub { margin: -4px 0 6px; font-size: 14px; color: var(--tinta-2); }
.login-caixa label { width: 100%; text-align: left; }
.login-caixa .check { font-size: 13px; }
.login-caixa .btn { width: 100%; justify-content: center; padding: 11px; font-size: 15px; }
.login-erro { min-height: 18px; font-size: 13px; color: var(--perigo); font-weight: 500; }

/* ---------- painel "PDF pronto" ---------- */
#painel-envio { display: none; position: fixed; inset: 0; z-index: 250; background: rgba(10, 10, 10, .55); align-items: center; justify-content: center; padding: 16px; }
#painel-envio.mostrar { display: flex; }
.painel-caixa { background: var(--superficie); border: 1px solid var(--linha); border-top: 3px solid var(--marca); border-radius: var(--raio); padding: 22px; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; max-height: 95vh; overflow: auto; }
.painel-caixa h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 18px; color: var(--marca); }
.painel-arquivo { font-size: 13px; color: var(--tinta-2); background: var(--superficie-2); border-radius: var(--raio); padding: 8px 10px; }
.painel-caixa .acoes { margin-top: 0; }
.painel-caixa .dica { margin: 0; }

/* ---------- Documento impresso ---------- */
#impressao { display: none; padding: 24px; background: #fff; max-width: 900px; margin: 0 auto; }
/* PDF gerado no navegador: renderiza fora da tela, na largura de uma folha A4 */
#impressao.gerando { display: block; position: static; width: auto; max-width: none; padding: 0 18px 0 2px; margin: 0; } /* folga à direita: o html2canvas desenha texto ~1% mais largo que o navegador */
#cortina-pdf { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 10, .9); color: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 10px; font-size: 13px; }
#cortina-pdf.mostrar { display: flex; }
#cortina-pdf .giro { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--marca); border-radius: 50%; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #cortina-pdf .giro { animation: none; } }

@media print {
  body { background: #fff; font-size: 12px; }
  header.topo, main, .toast { display: none !important; }
  #impressao { display: block; padding: 0; }
  .doc-grupo h3, .resumo-totais .caixa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 640px) {
  .topo-linha { padding: 8px 12px 4px; }
  .marca img { height: 26px; }
  .sinc { font-size: 0; gap: 0; }                 /* só a bolinha no celular */
  .sinc::before { width: 10px; height: 10px; }
  button.sair span { display: none; }             /* só o ícone */
  button.sair { padding: 7px; }
  nav.abas button { padding: 9px 11px 8px; font-size: 13px; }
  main { margin: 12px auto; padding: 0 8px; }
  .cartao { padding: 14px; }
}