/* Sistema UP — cores da marca UP Arte e Impressão (CMYK) */
:root {
  --magenta: #ec268f;
  --magenta-esc: #c81875;
  --ciano: #00aeef;
  --amarelo: #fff200;
  --laranja: #f7941d;
  --verde: #1f9d55;
  --vermelho: #d93636;

  --lateral: #2c2f35;
  --lateral-txt: #c9ccd2;
  --fundo: #d8dbe1;   /* um pouco mais escuro para os cartões brancos destacarem */
  --cartao: #ffffff;
  --linha: #dcdfe4;
  /* degradê das molduras do site: ciano → amarelo → laranja → magenta */
  --cmyk: linear-gradient(90deg, #00aeef 0%, #fff200 30%, #f7941d 50%, #ec268f 70%, #00aeef 100%);
  --texto: #1d1f23;
  --suave: #6b7079;
  --foco: rgba(236, 38, 143, .25);
  --raio: 10px;
  --sombra: 0 1px 2px rgba(16, 18, 22, .06), 0 1px 1px rgba(16, 18, 22, .04);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
a { color: var(--magenta-esc); }
h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h3 { margin: 0; font-size: 16px; }
code { background: #eef0f3; padding: 1px 5px; border-radius: 4px; }
.carregando { padding: 60px; text-align: center; color: var(--suave); }

/* ---------- Estrutura ---------- */
#app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral {
  background: var(--lateral); color: var(--lateral-txt); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow-y: auto;
}
.lateral-logo { display: block; padding: 22px 20px 14px; }
.lateral-logo img { width: 100%; max-width: 180px; display: block; }
.lateral nav { flex: 1; padding: 4px 10px 16px; }
.nav-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6d717a; padding: 16px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--lateral-txt); text-decoration: none; font-size: 14px; margin-bottom: 1px; border-left: 3px solid transparent;
}
.nav-item:hover { background: #1c1e22; color: #fff; }
.nav-item.ativo { background: #22242a; color: #fff; border-left-color: var(--magenta); }
.nav-item.ativo svg { color: var(--magenta); }
.lateral-usuario { display: flex; align-items: center; gap: 6px; border-top: 1px solid #23252a; padding: 12px 12px; }
.usuario-btn { flex: 1; display: flex; gap: 10px; align-items: center; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; padding: 4px; border-radius: 8px; min-width: 0; }
.usuario-btn:hover { background: #1c1e22; }
.usuario-btn b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-btn small { font-size: 11px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--ciano)); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.lateral .btn-icone { color: var(--lateral-txt); }
.topo-movel { display: none; }
main { padding: 24px 28px 80px; min-width: 0; max-width: 1400px; width: 100%; }

/* ---------- Componentes ---------- */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cabecalho > .voltar { flex-basis: 100%; margin-bottom: -12px; }
.dica-setor { color: var(--ciano); font-weight: 600; }
.voltar { font-size: 13px; text-decoration: none; color: var(--suave); display: inline-block; margin-bottom: 4px; }
.sub { display: block; color: var(--suave); font-size: 12px; font-weight: 400; margin-top: 2px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
#lista.cartao { padding: 0; overflow-x: auto; }
.secao-titulo { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #444851; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols-2 > .cartao, .pilha > .cartao { margin-bottom: 0; }
.cols-2 { margin-bottom: 16px; }
.pilha { display: flex; flex-direction: column; gap: 16px; }
.dica { margin: -6px 0 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid #d3d6dc; background: #fff; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #f6f7f9; border-color: #c3c7ce; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.btn-primario:hover { background: var(--magenta-esc); border-color: var(--magenta-esc); }
.btn-perigo { color: var(--vermelho); border-color: #f0c4c4; }
.btn-perigo:hover { background: #fdf1f1; border-color: var(--vermelho); }
.btn-whats { color: #128c4b; border-color: #b6e6cb; }
.btn-whats:hover { background: #effaf4; }
/* olhinho do painel: ocultar/mostrar valores */
.btn-olho { color: var(--suave); font-weight: 400; font-size: 13px; background: transparent; border-color: transparent; padding: 0 10px; }
.btn-olho:hover { color: var(--texto); background: rgba(127, 127, 127, .1); border-color: transparent; }
.btn-olho.ativo { color: var(--magenta); }
@media (max-width: 700px) { .btn-olho span { display: none; } .btn-olho { padding: 0 11px; } }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-grande { height: 44px; width: 100%; font-size: 15px; }
.btn-icone { background: none; border: 0; cursor: pointer; color: var(--suave); padding: 6px; border-radius: 6px; line-height: 0; font-size: 14px; }
.btn-icone:hover { background: rgba(127, 127, 127, .15); color: var(--texto); }
.link { background: none; border: 0; padding: 0; color: var(--magenta-esc); cursor: pointer; font: inherit; text-decoration: underline; }
.link-peq { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.chip-azul { background: #e2f5fd; color: #0077a8; }
.chip-verde { background: #e3f6eb; color: #17763f; }
.chip-amarelo { background: #fff6cc; color: #8a6d00; }
.chip-rosa { background: #fde6f2; color: #b0145f; }
.chip-cinza { background: #eceef1; color: #5b606a; }
.chip-vermelho { background: #fde8e8; color: #b42323; }
/* caixa geral por empresa: cartões das contas */
.acoes-titulo { margin-left: auto; display: inline-flex; gap: 6px; }
.conta-total { margin-left: 6px; font-size: 15px; }
.contas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.conta-cartao { font: inherit; text-align: left; border: 1px solid var(--borda, #dde0e5); border-left: 4px solid #00aeef; border-radius: 10px;
  background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.conta-cartao.conta-maquininha { border-left-color: #ec268f; }
.conta-cartao:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.conta-cartao small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6b7079; }
.conta-cartao b { font-size: 14px; }
.conta-cartao span { font-size: 16px; font-weight: 600; }
.conta-cartao em { font-size: 11px; color: #a84f00; font-style: normal; }
.chip-laranja { background: #ffeedd; color: #a84f00; }
.chip-roxo { background: #efe8fb; color: #5b2ca0; }

.txt-suave { color: var(--suave); }
.txt-ok { color: var(--verde); }
.txt-perigo { color: var(--vermelho); }
.txt-alerta { color: #c46a00; }
.dir { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.trunca { display: block; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); padding: 10px 14px; border-bottom: 1px solid var(--linha); background: #fafbfc; white-space: nowrap; }
.tabela th.dir { text-align: right; }
.tabela td { padding: 10px 14px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tfoot td { border-top: 1px solid var(--linha); background: #fafbfc; font-weight: 600; }
.tabela-clicavel tbody tr { cursor: pointer; }
.tabela-clicavel tbody tr:hover td { background: #fdf3f8; }
.tabela-compacta th, .tabela-compacta td { padding: 7px 8px; }
.cartao > .tabela-compacta th { background: none; }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--linha); color: var(--suave); font-size: 13px; gap: 8px; }
.vazio { text-align: center; padding: 48px 20px; color: var(--suave); }
.vazio p { margin: 0 0 14px; }

/* Abas e filtros */
.abas { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; border-bottom: 1px solid var(--linha); }
.abas button { background: none; border: 0; padding: 9px 14px; font: inherit; font-weight: 600; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas button:hover { color: var(--texto); }
.abas button.ativa { color: var(--magenta-esc); border-bottom-color: var(--magenta); }
.filtros { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.busca { flex: 1; min-width: 220px; max-width: 420px; }
.filtro-data { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; }
.filtro-data input { width: 150px; }

/* Formulários */
input, select, textarea {
  font: inherit; color: inherit; border: 1px solid #cfd3d9; border-radius: 8px; padding: 0 10px; height: 36px; background: #fff; width: 100%; min-width: 0;
}
textarea { padding: 8px 10px; height: auto; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--foco); }
input[readonly] { background: #f6f7f9; color: var(--suave); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--magenta); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
/* celular: tabela larga (pagamentos, notas, boletos…) rola dentro do cartão em vez de alargar a página */
@media (max-width: 700px) { .cartao > table.tabela, .cartao > .mt8 > table.tabela { display: block; overflow-x: auto; max-width: 100%; } }
/* conta ainda não escolhida para PIX/cartão/transferência */
.campo-obrigatorio select { border-color: #e0a300; background: #fff8e6; }
.campo-obrigatorio > span::after { content: ' — escolha'; color: #a15c00; font-weight: 600; }
.campo > span { font-size: 12px; font-weight: 600; color: #4b5059; }
.campo-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; align-self: end; min-height: 36px; }
.campo-check input { width: 16px; height: 16px; }
.com-botao { display: flex; gap: 6px; }
.com-botao input { flex: 1; }
fieldset.permissoes { border: 1px solid var(--linha); border-radius: 8px; margin: 16px 0 0; padding: 8px 14px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
fieldset.permissoes legend { font-weight: 600; font-size: 12px; padding: 0 6px; }
fieldset.permissoes[hidden] { display: none; }
.linha-acoes { margin-top: 12px; display: flex; gap: 8px; }
form.bloqueado input, form.bloqueado select, form.bloqueado textarea { pointer-events: none; background: #f6f7f9; }

/* Autocompletar */
.sugestoes { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); max-height: 320px; overflow-y: auto; }
.sugestoes-flutuantes { position: fixed; top: auto; right: auto; margin-top: 0; z-index: 60; max-width: calc(100vw - 24px); }
.sugestao { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f1f2f4; }
.sugestao small { color: var(--suave); }
.sugestao.ativo, .sugestao:hover { background: #fdf0f7; }
.sugestao-rodape { color: var(--magenta-esc); font-weight: 600; }
.com-botao { position: relative; }
.busca-catalogo { position: relative; flex: 1; max-width: 460px; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Pedido */
.cli-info { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.cli-info:empty { display: none; }
.cli-info span small { display: block; color: var(--suave); font-size: 11px; }
.itens-wrap { overflow-x: auto; margin: 0 -18px 10px; }
.tabela.itens { min-width: 860px; }
.tabela.itens th { background: none; padding: 8px 6px; }
.tabela.itens th:first-child, .tabela.itens td:first-child { padding-left: 18px; }
.tabela.itens td { padding: 6px; vertical-align: top; border-bottom: 1px solid #f0f1f3; }
.tabela.itens td:nth-child(7) { padding-top: 14px; }
.tabela.itens textarea { min-height: 36px; }
.medidas { display: flex; align-items: center; gap: 4px; }
.medidas span { color: var(--suave); }
.totais { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.linha-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.linha-total input { width: 140px; }
.linha-total.grande { font-size: 20px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 8px 0; }
.linha-total.grande b { color: var(--magenta-esc); }
.sel-status { width: auto; font-weight: 600; }
.barra-salvar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 0; background: linear-gradient(to top, var(--fundo) 70%, transparent); z-index: 5; }
.cartao .barra-salvar { background: none; position: static; padding-bottom: 0; }

/* Calculadora de preço */
.calc-corpo { display: grid; grid-template-columns: 1fr 330px; gap: 16px; margin-top: 14px; align-items: start; }
.calc-comp { min-width: 0; overflow-x: auto; }
.calc-tab { min-width: 640px; }
.calc-tab td { vertical-align: top; }
.calc-tab input, .calc-tab select { height: 30px; font-size: 13px; padding: 0 6px; }
.calc-tab small.sub { font-size: 11px; }
.calc-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.calc-busca { position: relative; flex: 1; min-width: 240px; }
.calc-resumo { background: #fafbfc; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; position: sticky; top: 0; }
.calc-resumo .linha-total input { width: 120px; height: 32px; }
.calc-resumo .linha-total.grande { font-size: 16px; }
.calc-custo { border-top: 1px solid var(--linha); padding-top: 8px; font-weight: 600; }
.calc-lista { margin-top: 12px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; background: #fcfcfd; }
.calc-lista[hidden] { display: none; }
.calc-lista-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.calc-lista-topo input { max-width: 340px; }
#cGrupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 18px; max-height: 360px; overflow-y: auto; align-items: start; }
.calc-grupo { margin-bottom: 8px; }
/* marcar materiais e mão de obra primeiro, depois a tabela calculada */
.calc-comp { display: flex; flex-direction: column; }
.calc-comp .calc-add { order: 1; margin: 0 0 4px; }
.calc-comp .calc-lista { order: 2; margin: 6px 0 12px; }
.calc-comp .calc-tab { order: 3; }
.calc-grupo[hidden] { display: none; }
.acoes-item { display: flex; align-items: center; gap: 4px; }
.btn-calc { border-color: var(--ciano); color: #0a6d93; font-weight: 600; white-space: nowrap; }
.btn-calc:hover { background: #e2f4fc; }
.btn-calc.feito { border-color: var(--linha); color: var(--suave); font-weight: 500; }
/* calculadora no formato da planilha: processo/material na linha, quantidade na frente */
/* barra de modelos no topo da calculadora: escolher + salvar/novo/renomear/excluir */
.modelo-barra { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: #f8f9fb; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; }
.modelo-barra .campo { flex: 1 1 320px; margin: 0; }
.modelo-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modelo-acoes .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pulsa { box-shadow: 0 0 0 3px var(--foco); }
/* blocos da calculadora: cada parte num cartão com cabeçalho colorido e subtotal */
.calc-bloco { border: 1px solid var(--linha); border-radius: 12px; background: #fff; margin-bottom: 14px; overflow: hidden; }
.calc-bloco > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: #f8f9fb; border-left: 4px solid var(--ciano); }
.calc-bloco.bloco-mat > header { border-left-color: var(--magenta); }
.calc-bloco.bloco-terc > header { border-left-color: var(--laranja); }
.calc-bloco > header b { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.calc-bloco > header small { color: var(--suave); font-size: 12px; }
.calc-bloco > header .calc-sub { margin-left: auto; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.calc-bloco > header .btn { margin-left: 4px; }
.calc-bloco .calc-plan { margin: 0; }
.calc-bloco .calc-plan th:first-child, .calc-bloco .calc-plan td:first-child { padding-left: 14px; }
.calc-bloco .calc-plan tbody tr:nth-child(even):not(.usado):not(.calc-grupo-lin) td { background: #fbfbfc; }
.calc-bloco .calc-filtros { padding: 10px 14px 0; }
.calc-bloco .calc-mat-wrap { margin: 8px 14px 14px; }
.calc-plan tr.avulso input[data-k="descricao"] { width: 100%; }
/* nomes de materiais e processos: tudo em maiúsculas, sem negrito */
.calc-plan td:first-child > b { font-weight: 400; text-transform: uppercase; font-size: 12.5px; }
.calc-plan tr.avulso input[data-k="descricao"] { text-transform: uppercase; }
.calc-plan tr.avulso .c-un input { width: 52px; }
.calc-plan tr.avulso .c-v input { width: 92px; text-align: right; }
.calc-grupo-lin.avulso-tit td { color: var(--laranja); }
.calc-grupo-lin small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--suave); margin-left: 6px; }
.resumo-bloco { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.resumo-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.resumo-final { background: #fdf0f7; border: 1px solid #f6c8df; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.resumo-final .linha-total.grande span { font-weight: 700; color: var(--magenta-esc); }
.resumo-final .linha-total.grande input { font-size: 17px; font-weight: 700; }
.calc-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; color: var(--texto); }
.calc-sec:first-child { margin-top: 0; }
.calc-sec small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--suave); }
.calc-plan { width: 100%; }
.calc-plan th { font-size: 11px; }
.calc-plan td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
.calc-plan tr[hidden] { display: none; }
.calc-plan input, .calc-plan select { height: 30px; font-size: 13px; padding: 0 6px; }
.calc-plan .c-n { width: 104px; white-space: nowrap; } .calc-plan .c-n input { width: 64px; }
.calc-plan .c-base { width: 120px; } .calc-plan .c-v { width: 104px; white-space: nowrap; }
.calc-plan .c-un { width: 60px; color: var(--suave); } .calc-plan .c-qtd { width: 150px; } .calc-plan .c-x { width: 36px; }
.calc-plan tr.usado td { background: #fdf0f7; }
.calc-plan tr.usado td:first-child { box-shadow: inset 3px 0 0 var(--magenta); }
.calc-grupo-lin td { background: #f4f5f7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--magenta-esc); padding: 5px 8px; }
.calc-mat-wrap { max-height: 380px; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.calc-mat-wrap thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.calc-filtros { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.calc-filtros input[type="text"], .calc-filtros #cFiltro { max-width: 360px; }
.qtd-cel { display: flex; align-items: center; gap: 4px; }
.qtd-cel input { width: 96px; }
.qtd-cel input.auto { background: #eef8fd; color: #0a6d93; font-weight: 600; }
.btn-icone.ativo { background: #e2f4fc; outline: 1px solid #9fdcf5; }
.calc-modo { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--suave); flex-wrap: wrap; }
.calc-modo select { height: 26px !important; font-size: 11.5px !important; max-width: 190px; }
.calc-modo input { width: 52px; height: 26px !important; font-size: 11.5px !important; }
.calc-grupo > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--magenta-esc); margin-bottom: 4px; }
.calc-check { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: start; padding: 3px 4px; border-radius: 6px; cursor: pointer; font-size: 12.5px; line-height: 1.3; }
.calc-check[hidden] { display: none; }
.calc-check:hover { background: #fdf0f7; }
.calc-check input { margin-top: 1px; }
.calc-check small { color: var(--suave); white-space: nowrap; }
.calc-check:has(input:checked) { background: #fde6f2; font-weight: 600; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #d3d6dc; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff; user-select: none; }
.chip-check input { width: 14px; height: 14px; }
.chip-check:has(input:checked) { background: #fde6f2; border-color: var(--magenta); color: var(--magenta-esc); }
/* Relatórios */
.rel-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rel-grupo { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.rel-grupo > b { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); margin-bottom: 4px; }
.rel-item { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; color: var(--texto); }
.rel-item:hover { background: #f3f4f6; }
.rel-item.ativo { background: #1d1f23; color: #fff; font-weight: 600; }
.rel-cab h2 { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.rel-cab p { margin: 2px 0 12px; }
.dre td:first-child { white-space: nowrap; }
.dre-receita td { background: #eef9f2; }
.dre-total td { border-top: 2px solid var(--linha); }
.dre-resultado td { background: #fff7d6; border-top: 2px solid #1d1f23; }
.legenda { text-transform: none; letter-spacing: 0; font-weight: 400; }
@media print {
  body:not(.modo-impressao) .lateral, body:not(.modo-impressao) .topo-movel, body:not(.modo-impressao) .rel-menu,
  body:not(.modo-impressao) .filtros, body:not(.modo-impressao) .acoes, body:not(.modo-impressao) .abas, body:not(.modo-impressao) #toasts { display: none !important; }
  body:not(.modo-impressao) #app { display: block; }
  body:not(.modo-impressao) main { padding: 0; max-width: none; }
  body:not(.modo-impressao) { background: #fff; }
  .cartao, .kpi { box-shadow: none; break-inside: avoid; }
}
.simulador { border: 1px solid var(--linha); border-radius: 12px; margin: 16px 0 0; padding: 10px 14px 14px; background: #fafbfc; }
.simulador[hidden] { display: none; }
.simulador legend { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 0 6px; }
.medidas small { color: var(--suave); }
/* agenda de instalações */
.agenda-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.agenda-nav b { margin: 0 8px; }
.agenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.agenda-dia { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px; min-height: 160px; display: flex; flex-direction: column; gap: 6px; }
.agenda-dia.hoje { border-color: var(--magenta); box-shadow: 0 0 0 2px var(--foco); }
.agenda-cab { display: flex; align-items: center; gap: 6px; font-size: 13px; border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.agenda-cab .btn-icone { margin-left: auto; }
.agenda-item { text-align: left; font: inherit; font-size: 12px; border: 0; border-left: 4px solid var(--ciano); background: #f2f8fc; border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.agenda-item span { font-weight: 600; }
.agenda-item small { color: var(--suave); }
.agenda-item.st-ok { border-left-color: var(--verde); background: #eef8f2; }
.agenda-item.st-canc { border-left-color: #aaa; background: #f3f3f3; text-decoration: line-through; opacity: .7; }
.agenda-vazio { margin: 0; text-align: center; }
.equipe-lista { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.foto-btn { display: inline-flex; cursor: pointer; }
@media (max-width: 700px) { .agenda { grid-template-columns: 1fr; } .agenda-dia { min-height: 0; } }

/* painel em grade: quadros da mesma linha com a mesma altura */
.painel-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pg-cel { min-width: 0; display: flex; }
.pg-cel > .cartao, .pg-cel > section { flex: 1; margin: 0 !important; display: flex; flex-direction: column; min-width: 0; }
.painel-rolagem { max-height: 340px; overflow-y: auto; }
/* flex: none e display: table — no iPhone (Safari) a tabela em bloco com rolagem dentro do flex era espremida a altura zero */
.pg-cel .inst-semana .tabela { flex: none; }
.cartao.inst-semana > table.tabela { display: table; }
@media (max-width: 1100px) { .pg-cel { grid-column: span 12 !important; } }
.inst-semana { border-left: 4px solid var(--ciano); }
.inst-periodo { display: block; margin: -6px 0 8px; }
.inst-semana .tabela { table-layout: fixed; width: 100%; }
.inst-semana .tabela td:first-child { width: 100px; }
.inst-semana .tabela td:last-child { width: 86px; text-align: right; }
.inst-semana .tabela td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.inst-semana tr.inst-hoje td { background: #eef8fd; }
@media (max-width: 700px) {
  .inst-semana .tabela td { padding: 6px 4px; font-size: 13px; }
  .inst-semana .tabela td:first-child { width: 76px; padding-left: 8px; }
  .inst-semana .tabela td:last-child { width: 78px; }
  .inst-semana .tabela .chip { padding-left: 6px; padding-right: 6px; font-size: 11px; }
}
/* agenda em meses, como o quadro branco: equipe pela cor */
.abas-mini { display: inline-flex; margin: 0; overflow: visible; }
.abas-mini button { padding: 5px 12px; font-size: 12px; }
.wh-sit { flex-wrap: wrap; }
.regua-feito td { opacity: .55; }
/* ficha de instalação no celular */
#instPonto { flex-wrap: wrap; align-items: center; }
.regra-senha { font-size: 12px; line-height: 1.45; background: #f6f7f9; border-radius: 8px; padding: 8px 10px; }
/* compras */
.aviso-compras { display: block; margin-bottom: 8px; padding: 7px 10px; border-radius: 8px; background: #fff4dc; border: 1px solid #f3d38a; color: #7a4a00; font-size: 12.5px; text-decoration: none; line-height: 1.4; }
.aviso-compras:hover { background: #ffecc2; }
.aviso-compras span { color: var(--magenta); font-weight: 600; white-space: nowrap; }
.alerta-falta { border-top: 3px solid #d64545; }
.cp-grupo + .cp-grupo { margin-top: 12px; }
.cp-grupo-tit { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.cp-itens .c-qtd input { width: 90px; }
.cp-itens tr.removido td { text-decoration: line-through; opacity: .45; }
.cp-itens tr.novo td { background: #f3fbf6; }
.inst-check { display: grid; gap: 6px; }
.inst-check .campo-check { font-size: 14px; padding: 6px 8px; border-radius: 8px; background: #f6f7f9; }
.inst-check input { width: 20px; height: 20px; }
.arte-item { position: relative; }
.foto-momento { position: absolute; left: 6px; top: 6px; z-index: 1; background: rgba(31, 35, 41, .8); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.assinatura-canvas { width: 100%; height: auto; aspect-ratio: 3 / 1; border: 2px dashed #c3c8d0; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.inst-ass input { flex: 1; min-width: 160px; }
.assinatura-img { display: block; max-width: 100%; border: 1px solid var(--linha); border-radius: 10px; background: #fff; margin-bottom: 4px; }
.aviso-versao { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; max-width: calc(100% - 32px); padding: 12px 18px; border: 0; border-radius: 12px; background: var(--magenta); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; }
/* ficha da instalação em etapas: uma de cada vez, as feitas ficam fechadas com o horário */
.etapas { display: grid; gap: 10px; margin-top: 12px; }
.etapa { border: 1px solid var(--linha); border-radius: 12px; background: #fff; overflow: hidden; }
.etapa.atual { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(236, 38, 143, .12); }
.etapa.futura { opacity: .5; }
.etapa-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.etapa-cab:disabled { cursor: default; }
.etapa-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e9ecf0; font-weight: 700; font-size: 13px; }
.etapa.atual .etapa-num { background: var(--magenta); color: #fff; }
.etapa.feita .etapa-num { background: var(--verde); color: #fff; }
.etapa-tit { flex: 1; font-weight: 600; }
.etapa-cab small { color: var(--suave); white-space: nowrap; }
.etapa-corpo { padding: 0 12px 12px; }
.etapa-avancar { width: 100%; justify-content: center; margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
.inst-cliente { background: #f2f9fd; border: 1px solid #cfe9f6; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.inst-cliente p { margin: 4px 0 8px; }
#whTexto { font-size: 13px; line-height: 1.45; }
.ag-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-left: auto; color: var(--suave); }
.ag-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ag-legenda small { opacity: .8; }
.ag-x { background: repeating-linear-gradient(45deg, #f6c4c4 0 3px, #fff 3px 6px); border: 1px solid #e38b8b; }
.ag-x.ag-x-fds { background: repeating-linear-gradient(45deg, #dfe2e7 0 3px, #fff 3px 6px); border-color: #c3c8d0; }
.ag-mes { margin-bottom: 18px; padding: 0; overflow: hidden; }
/* OS: linha da instalação abaixo da previsão de entrega */
.inst-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.inst-linha:empty { display: none; }
.inst-alerta { color: #a15c00; background: #fff4dc; border: 1px solid #f3d38a; border-radius: 8px; padding: 5px 10px; font-weight: 600; }
/* quadro + lista "aguardando agendamento" ao lado */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ag-layout:has(.ag-pendentes:not([hidden])) { grid-template-columns: minmax(0, 1fr) 260px; }
.ag-pendentes { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; border-top: 3px solid var(--amarelo, #f0b429); }
.ag-pend-item { display: block; width: 100%; text-align: left; background: none; border: 1px solid #e3e5e9; border-radius: 10px; padding: 8px 10px; margin-top: 8px; cursor: pointer; font: inherit; color: inherit; }
.ag-pend-item:hover { border-color: var(--magenta); background: #fdf0f7; }
.ag-pend-abrir { float: right; font-size: 11px; color: var(--magenta); text-decoration: none; margin-left: 6px; }
.ag-pend-abrir:hover { text-decoration: underline; }
@media (max-width: 1100px) { .ag-layout:has(.ag-pendentes:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .ag-pendentes { position: static; max-height: none; order: -1; } }
.ag-mes-tit { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; font-size: 13px; color: var(--suave); letter-spacing: .06em; border-bottom: 1px solid var(--linha); }
.ag-mes-tit b { color: var(--texto); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.ag-mes-tit::before { content: ''; width: 28px; height: 4px; border-radius: 2px; background: var(--cmyk); align-self: center; }
.ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-cab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-align: center; padding: 7px 2px; background: #6b7079; color: #fff; }   /* grafite: não confundir com a Equipe Preta */
.ag-dia { min-height: 104px; border-right: 1px solid #e3e5e9; border-bottom: 1px solid #e3e5e9; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; background: #fff; transition: background .12s; }
.ag-dia:nth-child(7n) { border-right: 0; }
.ag-dia:hover { background: #fdf5fa; }
/* sábado e domingo: bloqueados (hachurado cinza, mais leve que o vermelho de feriado/recesso) */
.ag-dia.fds { background: repeating-linear-gradient(135deg, #f7f8fa 0 8px, #eceef2 8px 16px); }
.ag-dia.fds .ag-num { color: var(--suave); }
.ag-dia.fora { background: #f3f4f6; cursor: default; }
.ag-dia.hoje { background: #fff7fb; box-shadow: inset 0 0 0 2px var(--magenta); }
.ag-dia.alvo, .agenda-dia.alvo { background: #e8f6fd !important; box-shadow: inset 0 0 0 2px var(--ciano); }
.ag-dia.bloq { background: repeating-linear-gradient(135deg, #fff5f5 0 8px, #fde8e8 8px 16px); }
.ag-num { font-weight: 700; font-size: 12px; color: var(--suave); line-height: 1; }
.ag-dia.hoje .ag-num { color: #fff; background: var(--magenta); border-radius: 999px; padding: 3px 7px; align-self: flex-start; }
.ag-bloq-txt { font-size: 10px; color: #b02a2a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ag-serv { --cor: #8a8f98; font: inherit; font-size: 11px; text-align: left; border: 0; background: var(--cor); color: #fff; font-weight: 600;
  border-radius: 6px; padding: 3px 7px; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ag-serv:active { cursor: grabbing; }
.ag-serv small { font-weight: 400; opacity: .8; margin-left: 2px; }
/* nome do cliente no quadro: no máximo 2 linhas (nome completo ao passar o mouse e na ficha) */
.ag-serv .ag-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-sv { font-style: normal; font-weight: 400; font-size: .88em; opacity: .78; }
.ag-serv { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }.ag-serv.st-ok { opacity: .45; text-decoration: line-through; }
.ag-serv:hover { filter: brightness(1.12); }
.ag-dup { font-size: 12px; margin-left: 6px; }.agenda-item { --cor: var(--ciano); border-left-color: var(--cor) !important; }
.agenda-dia.bloq { background: #fff6f6; }
.agenda-dia.fds:not(.bloq) { background: repeating-linear-gradient(135deg, #f7f8fa 0 8px, #eceef2 8px 16px); }
.ag-tag { --cor: #8a8f98; display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--cor); border-radius: 999px; padding: 1px 8px; }
.eq-linha { display: grid; grid-template-columns: 44px 1fr 2fr 32px; gap: 8px; align-items: center; margin-top: 6px; }
.eq-linha input[type="color"] { height: 34px; padding: 2px; }
.com-cor { display: flex; align-items: center; gap: 6px; }
.com-cor i { width: 14px; height: 30px; border-radius: 4px; flex: none; }
.inst-cor { box-shadow: inset 4px 0 0 var(--cor, transparent); padding-left: 10px !important; }
@media (max-width: 800px) { .ag-dia { min-height: 64px; } .ag-serv { font-size: 10px; } .ag-cab { font-size: 9px; } }

/* acompanhamento de orçamentos */
.retornos { border-left: 4px solid var(--laranja); margin-bottom: 16px; }
.notas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notas li { border-left: 3px solid var(--linha); padding: 2px 0 2px 10px; }
.notas small { display: block; color: var(--suave); font-size: 11px; }

/* ponto de equilíbrio no painel */
.pe { margin-bottom: 16px; }
.pe-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.pe-numeros > div { display: flex; flex-direction: column; gap: 2px; }
.pe-numeros small { color: var(--suave); font-size: 12px; font-weight: 600; }
.pe-numeros b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pe-numeros span { color: var(--suave); font-size: 12px; }
.pe-ok b { color: var(--verde); }
/* últimos 12 meses */
.pe-ano { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0 4px; padding: 10px 12px;
  background: #f4f5f7; border-radius: 10px; }
.pe-ano > div { display: flex; flex-direction: column; gap: 2px; }
.pe-ano small { color: var(--suave); font-size: 11.5px; font-weight: 600; }
.pe-ano b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pe-ano span { color: var(--suave); font-size: 12px; }
.pe-ano .pe-baixo b { color: #b42323; }
.pe-ano .pe-ano-mm { font-size: 14px; }
/* fluxo de caixa projetado e metas (painel) */
.proj { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.proj > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f6f7f9; }
.proj small { color: var(--suave); font-size: 11.5px; font-weight: 600; }
.proj b { font-size: 18px; font-variant-numeric: tabular-nums; }
.proj span { font-size: 11.5px; }
.proj .proj-hoje { background: #eef8fd; }
.proj .proj-neg b { color: #b42323; }
.proj-nota { font-size: 11.5px; margin-top: 8px; }
.custo-resumo b { font-size: 16px; }
.meta-linha { display: grid; gap: 4px; margin-bottom: 10px; }
.meta-linha > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.meta-linha span { color: var(--suave); }
.pe-barra { position: relative; height: 22px; border-radius: 11px; background: #eef0f3; overflow: hidden; }
.pe-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 11px; background: linear-gradient(90deg, var(--ciano), var(--magenta)); }
.pe-barra.ok i { background: linear-gradient(90deg, var(--ciano), var(--verde)); }
.pe-barra span { position: absolute; right: 10px; top: 0; line-height: 22px; font-size: 12px; font-weight: 700; color: var(--texto); }
.pe-ritmo { margin: 10px 0 0; }
/* gráfico do equilíbrio: uma cor só (ciano da marca), grade leve, linha de referência neutra */
.pe-grafico { margin-top: 18px; max-height: 280px; }
.pe-grade { stroke: #eceef1; stroke-width: 1; }
.pe-base0 { stroke: #c9cdd3; }
.grafico .pe-eixo { font-size: 10px; fill: #9a9ea6; }
.pe-barra-m { fill: #00aeef; transition: fill .15s; }
.pe-mes.atual .pe-barra-m { fill: #9fdcf5; }
.pe-mes.abaixo .pe-barra-m { fill: #f2a7a7; }          /* mês fechado abaixo do equilíbrio: vermelho pastel */
.pe-mes.abaixo:hover .pe-barra-m { fill: #e98787; }
.grafico .pe-mes.abaixo .pe-valor.dentro { fill: #7a1f1f; }
.pe-alvo { fill: transparent; }
.pe-mes:hover .pe-barra-m { fill: #0089bd; }
.pe-mes.atual:hover .pe-barra-m { fill: #6fcbef; }
.pe-mes:hover .pe-alvo { fill: rgba(0, 0, 0, .025); }
.grafico .pe-valor { font-size: 11px; font-weight: 600; fill: var(--texto); }
.grafico .pe-valor.dentro { fill: #fff; }
.grafico .pe-mes-txt { font-size: 11px; fill: var(--suave); }
.pe-linha { stroke: #3c4048; stroke-width: 1.5; stroke-dasharray: 5 4; }
.pe-etiqueta rect { fill: #1d1f23; }
.grafico .pe-etiqueta text { fill: #fff; font-size: 11px; font-weight: 600; }
.pe-base { margin-top: 10px; font-size: 13px; }
.pe-base summary { cursor: pointer; color: var(--magenta-esc); font-weight: 600; }
.pe-base ul { margin: 6px 0; padding-left: 20px; line-height: 1.55; }
.orc-envio { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.aviso-copia { border-left: 4px solid var(--ciano); }
.aviso-copia.alerta { border-left-color: #e8920c; background: #fff8ec; }
.aviso-copia p { margin: 8px 0 4px; } .aviso-copia ul { margin: 0 0 8px; padding-left: 20px; }
.repetir-os { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.repetir-os > small { color: var(--suave); font-weight: 600; }
.repetir-item { text-align: left; border: 1px solid var(--linha); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; }
.repetir-item:hover { border-color: var(--magenta); background: #fdf3f9; }
.repetir-item span { display: block; color: var(--suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arq-linha { display: grid; grid-template-columns: 90px 1fr 32px; gap: 8px; align-items: end; margin-bottom: 8px; }
.arte-zona { border: 2px dashed var(--linha); border-radius: 12px; padding: 14px; background: #fafbfc; transition: border-color .15s, background .15s; }
.arte-zona.arrastando { border-color: var(--magenta); background: #fdeef6; }
.arte-lista { display: flex; flex-wrap: wrap; gap: 12px; }
.arte-lista:empty { display: none; }
.arte-item { position: relative; margin: 0; border: 1px solid var(--linha); border-radius: 10px; background: #fff; padding: 6px; }
.arte-item img { display: block; max-height: 220px; max-width: 360px; object-fit: contain; }
.arte-item .btn-icone { position: absolute; top: 4px; right: 4px; background: #fff; }
.arte-item figcaption { font-size: 11px; color: var(--suave); text-align: center; margin-top: 4px; }
.arte-dica { margin: 0; color: var(--suave); text-align: center; }
.arte-lista:not(:empty) + .arte-dica { margin-top: 12px; }
.arte-arquivo { color: var(--magenta); font-weight: 600; cursor: pointer; text-decoration: underline; }
.valor-final { font-size: 18px; font-weight: 700; }
.nota-margem { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.nota-margem.desce { background: #fff4e5; border-left: 4px solid #e8920c; }
.nota-margem.sobe { background: #e9f8ef; border-left: 4px solid #1f9d55; }
.faixa-linha { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.faixas-tabela td { padding: 4px 8px; }
.faixas-tabela tr.atual td { background: #fdeef6; font-weight: 700; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ficha > div { background: #f6f7f9; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ficha small { color: var(--suave); font-size: 12px; font-weight: 600; }
.ficha b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ficha b span { font-size: 12px; font-weight: 500; color: var(--suave); }
.calc-medidas .grande { font-size: 18px; }
.obs-produto { white-space: pre-wrap; margin: 4px 0 0; }
.medidas .sel-unidade { width: auto; min-width: 52px; flex: none; padding-left: 6px; padding-right: 6px; }
.sel-unidade { font-weight: 600; }
.calc-medidas { margin: 14px 0 0; padding: 12px 14px; background: #f6f7f9; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; }
[data-calc] { font-size: 15px; }

/* Painel */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); border-top: 3px solid var(--ciano); }
a.kpi:hover { border-color: #cfd3d9; border-top-color: var(--magenta); }
.kpi small { color: var(--suave); font-size: 12px; font-weight: 600; }
.kpi b { font-size: 21px; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: 12px; }
.kpi-alerta { border-top-color: var(--vermelho); }
.kpi-alerta span { color: var(--vermelho); font-weight: 600; }
.kpi-destaque { border-top-color: var(--magenta); }
.barra { height: 8px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--ciano), var(--magenta)); border-radius: 999px; }
.status-resumo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: 13px; }
.grafico { width: 100%; height: auto; }
.grafico .eixo { stroke: var(--linha); }
.grafico text { font-size: 11px; fill: var(--suave); }
.cor-entrada { fill: var(--ciano); background: var(--ciano); }
.cor-saida { fill: var(--magenta); background: var(--magenta); }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.aviso { background: #fff8db; border: 1px solid #f1e0a0; padding: 10px 14px; border-radius: 8px; color: #6d5600; margin: 0 0 14px; }
.aviso-perigo { background: #fdeeee; border-color: #f2c2c2; color: #8e1f1f; }

/* Modal */
.modal-fundo { position: fixed; inset: 0; background: rgba(17, 18, 20, .45); z-index: 100; display: grid; place-items: start center; padding: 6vh 16px 16px; overflow-y: auto; animation: aparecer .12s ease-out; }
.modal { background: #fff; border-radius: 12px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.modal-corpo { padding: 18px 20px; }
.modal-corpo > p:first-child { margin-top: 0; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--linha); background: #fafbfc; border-radius: 0 0 12px 12px; }
.modal footer .btn-esquerda { margin-right: auto; }
@keyframes aparecer { from { opacity: 0; } }

/* Avisos */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1d1f23; color: #fff; padding: 11px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: 380px; border-left: 4px solid var(--verde); transition: opacity .3s, transform .3s; }
.toast-erro { border-left-color: var(--vermelho); }
.toast-aviso { border-left-color: var(--laranja); }
.toast.saindo { opacity: 0; transform: translateY(6px); }
.toast-desfazer { margin-left: 12px; background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px;
  padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.toast-desfazer:hover { background: rgba(255,255,255,.12); }

/* Login */
/* Telas de acesso (login e senha nova): painel grafite com o logo, como a barra lateral, e o formulário num cartão branco */
.acesso { grid-column: 1 / -1; min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 46%) 1fr; background: var(--fundo); }
/* painel da marca: grafite da barra lateral, textura de pontos bem leve e um brilho suave nas cores da marca */
.acesso-marca { position: relative; overflow: hidden; display: grid; place-items: center; padding: 56px 40px 72px; color: #c9ccd2;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 174, 239, .14), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(236, 38, 143, .16), transparent 45%),
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(160deg, #2a2d33 0%, #32363c 50%, #3e434a 100%); }
.acesso-marca::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate; }
.acesso-centro { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 420px; animation: acessoSobe .7s ease-out both; }
.acesso-logo { width: min(200px, 55%); height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .35)); }
.acesso-faixa { width: 56px; height: 4px; border-radius: 3px; margin: 34px 0 18px;
  background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate; }
.acesso-titulo { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.acesso-modulos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.acesso-modulos li { font-size: 12px; color: #d6d9de; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.acesso-rodape { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: #8f949c; font-size: 11.5px; letter-spacing: .08em; }
@keyframes acessoSobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* lado do formulário */
.acesso-lado { display: grid; place-items: center; padding: 40px 24px; }
.acesso-caixa { width: 100%; max-width: 410px; background: #fff; border-radius: 20px; padding: 38px 34px 30px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(29, 31, 35, .06), 0 18px 50px rgba(29, 31, 35, .12); animation: acessoSobe .7s .08s ease-out both; }
.acesso h1 { font-size: 21px; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin: 0; letter-spacing: .01em; }
.acesso h1::before { content: ""; width: 28px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate; }
.acesso .sub { margin: -6px 0 6px; font-size: 13px; color: var(--suave); }
.acesso .campo input { height: 46px; border-radius: 12px; background: #f6f7f9; border-color: #e3e5ea; transition: border-color .15s, box-shadow .15s, background .15s; }
.acesso .campo input:focus { background: #fff; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(236, 38, 143, .14); outline: none; }
.acesso-botao { margin-top: 6px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.acesso-botao span { transition: transform .15s; }
.acesso-botao:hover span { transform: translateX(4px); }
.erro-acesso { color: var(--vermelho); margin: 0; text-align: center; font-size: 13px; }
.acesso-ajuda { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid #eef0f3; font-size: 12px; color: var(--suave); text-align: center; }
@media (max-width: 760px) {
  .acesso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acesso-marca { padding: 30px 20px 24px; }
  .acesso-logo { width: 110px; }
  .acesso-faixa { margin: 18px 0 10px; width: 44px; }
  .acesso-titulo { font-size: 12px; letter-spacing: .26em; }
  .acesso-modulos, .acesso-rodape { display: none; }
  .acesso-lado { align-items: start; padding: 20px 16px 32px; }
  .acesso-caixa { padding: 28px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .acesso-centro, .acesso-caixa { animation: none; } }

/* ---------- Celular / tablet ---------- */
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; align-content: start; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4); }
  .topo-movel { display: flex; align-items: center; gap: 10px; background: var(--lateral); padding: 8px 12px; position: sticky; top: 0; z-index: 40; }
  .topo-movel img { height: 28px; }
  .topo-movel .btn-icone { color: #fff; }
  main { padding: 16px 16px 80px; }
  .cols-2, .calc-corpo { grid-template-columns: 1fr; }
  .grade { grid-template-columns: repeat(6, 1fr); }
  .grade > .campo, .grade > .campo-check { grid-column: span 6 !important; }
  .so-largo { display: none; }
  .busca { min-width: 0; max-width: none; width: 100%; flex-basis: 100%; }
  fieldset.permissoes { grid-template-columns: 1fr; }
}

/* ---------- Identidade UP (a mesma do site) ---------- */
@keyframes cmyk { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.lateral {
  /* grafite: menos preto, mais cinza */
  background: linear-gradient(180deg, #2a2d33 0%, #30343a 40%, #373b42 75%, #3e434a 100%);
  box-shadow: inset -1px 0 0 #454a52;
}
.lateral::before, .topo-movel::after {
  content: ""; display: block; height: 3px; flex-shrink: 0;
  background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate;
}
.topo-movel::after { position: absolute; left: 0; right: 0; bottom: 0; }
.topo-movel { position: sticky; background: linear-gradient(90deg, #2a2d33, #373b42); }
.nav-grupo { color: #8f949c; font-weight: 600; letter-spacing: .14em; }
.nav-item { border-left: 0; position: relative; transition: background .15s, color .15s; }
.nav-item:hover { background: rgba(255, 255, 255, .06); }
.nav-item.ativo { background: rgba(255, 255, 255, .09); }
.nav-item.ativo::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #00aeef, #fff200, #ec268f);
}
.nav-item.ativo svg { color: var(--amarelo); }
.lateral-usuario { border-top-color: rgba(255, 255, 255, .08); }
.usuario-btn:hover { background: rgba(255, 255, 255, .06); }
h1 { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 21px; }
.cabecalho h1::before {
  content: ""; display: inline-block; width: 28px; height: 3px; border-radius: 2px; margin-right: 2px;
  background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate;
}
.secao-titulo { letter-spacing: .1em; color: #2f3238; }
.btn { border-radius: 999px; padding: 0 18px; }
.btn-sm { padding: 0 12px; }
.btn-primario { background: linear-gradient(135deg, #ec268f, #c81875); border-color: #c81875; box-shadow: 0 6px 18px -8px rgba(236, 38, 143, .7); }
.btn-primario:hover { background: linear-gradient(135deg, #f0399b, #b3156a); }
.cartao, .kpi { border-radius: 14px; }
.kpi { border-top: 0; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00aeef, #33c2f5); }
.kpi-destaque::before { background: var(--cmyk); background-size: 300% 100%; animation: cmyk 6s ease-in-out infinite alternate; }
.kpi-alerta::before { background: var(--vermelho); }
a.kpi:hover { border-top-color: transparent; transform: translateY(-1px); box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .35); }
.kpi b { font-weight: 700; }
.abas button.ativa { border-bottom-color: transparent; position: relative; }
.abas button.ativa::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #00aeef, #ec268f); }
.tabela-clicavel tbody tr:hover td { background: #fff7d6; }
.modal { border-radius: 18px; overflow: hidden; }
.modal header { border-top: 3px solid transparent; border-image: var(--cmyk) 1; }

/* ---------- Impressão (OS, recibo, orçamento) ---------- */
body.modo-impressao { background: #e6e7ea; }
body.modo-impressao #app { display: block; }
.barra-impressao { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--lateral); color: #fff; z-index: 5; }
.folha { width: 210mm; min-height: 297mm; margin: 16px auto; background: #fff; padding: 10mm 11mm; color: #000; font-size: 11px; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
.imp-logo { filter: brightness(0); height: 46px; }
.imp-empresa { display: flex; gap: 12px; align-items: center; }
.imp-empresa div { display: flex; flex-direction: column; gap: 1px; font-size: 10px; }
.imp-empresa b { font-size: 12px; }
.imp-caixa { width: 100%; border-collapse: collapse; border: 1.5px solid #000; }
.imp-caixa th, .imp-caixa td { border: 1px solid #000; padding: 4px 6px; text-align: left; vertical-align: top; }
.imp-caixa th { background: #e8e8e8; font-weight: 700; white-space: nowrap; width: 1%; }
.imp-caixa td.dir { text-align: right; } .imp-caixa td.centro { text-align: center; }
.imp-rotulo { font-weight: 700; margin: 10px 0 3px; font-size: 11px; }
.imp-rotulo.centro { text-align: center; background: #e8e8e8; border: 1.5px solid #000; border-bottom: 0; margin-bottom: 0; padding: 2px; }
.os-topo { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.os-datas { width: 280px; flex-shrink: 0; }
.os-titulo { font-size: 16px; font-weight: 700; margin: 12px 0 6px; display: flex; align-items: center; gap: 8px; }
.os-numero { border: 1.5px solid #000; padding: 2px 16px; font-size: 15px; }
.os-cliente th { width: 95px; text-align: right; }
.os-cliente th.estreito { width: 70px; }
.imp-itens thead th { text-align: center; width: auto; }
.imp-itens td { height: 30px; }
.os-arquivos .arq-vazia td { height: 32px; }   /* linha em branco para escrever o arquivo à mão */
.os-rodape { display: grid; grid-template-columns: 1fr 230px; gap: 0; margin-top: -1.5px; }
.os-obs { border: 1.5px solid #000; padding: 6px; min-height: 70px; }
.os-obs div { margin-top: 4px; line-height: 1.4; }
.os-totais th { text-align: right; width: 50%; } .os-totais td { text-align: right; font-size: 12px; }
.os-condicoes { margin-top: 10px; } .os-condicoes th { text-align: center; width: 25%; } .os-condicoes td { text-align: center; height: 26px; }
.os-assinatura { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; align-items: end; }
.os-assinatura .imp-caixa th, .os-assinatura .imp-caixa td { text-align: center; }
.os-assinatura .imp-caixa td { height: 24px; }
/* arte do serviço no espaço em branco abaixo da OS */
.os-arte { margin-top: 12px; border: 1.5px solid #000; padding: 6px; display: flex; justify-content: center; align-items: center; gap: 6px; break-inside: avoid; }
.os-arte img { max-width: 100%; max-height: 115mm; object-fit: contain; }
.os-arte.varias { flex-wrap: wrap; }
.os-arte.varias img { max-width: calc(50% - 3px); max-height: 56mm; }
.assinatura { text-align: center; font-size: 9.5px; }
.assinatura span { display: block; border-top: 1px solid #000; margin: 34px 10px 3px; }
.folha-recibo { padding-top: 6mm; min-height: auto; }   /* uma via só: ocupa meia folha */
/* recibo: cada via com a própria faixa CMYK (a da folha inteira fica desligada) */
.folha-recibo.os-up::before, .folha-recibo.os-up::after { display: none; }
.recibo { position: relative; padding: 9px 2px 8px; break-inside: avoid; }
.recibo::before, .recibo::after { content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #00aeef 0%, #fff200 30%, #f7941d 50%, #ec268f 70%, #00aeef 100%); }
.recibo::before { top: 0; } .recibo::after { bottom: 0; }
.recibo .os-topo { align-items: center; }
.recibo-id { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.recibo-id small { font-size: 9px; letter-spacing: .14em; font-weight: 600; color: #3c4048; }
.recibo-id .os-titulo { margin: 0; }
.recibo-cliente { margin-top: 8px; }
.recibo-cliente th { width: 118px; }
.recibo-itens td { height: 22px; font-size: 10.5px; }
.recibo-rodape { display: grid; grid-template-columns: 1fr 230px; gap: 16px; margin-top: 1mm; align-items: end; }
.recibo-local b { font-size: 10.5px; letter-spacing: .04em; }
.recibo-local .assinatura span { margin-top: 26px; }
.corte { text-align: center; color: #888; margin: 9mm 0; letter-spacing: 1px; overflow: hidden; white-space: nowrap; }
.orc-topo { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 12px; }
.orc-num { text-align: right; display: flex; flex-direction: column; }
.orc-num small { font-size: 11px; letter-spacing: .15em; font-weight: 700; }
.orc-num b { font-size: 22px; }
.orc-topo + .imp-caixa { margin-bottom: 12px; }
.orc-final { margin-top: 18px; }
.orc-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }

/* ---- OS impressa: identidade da UP sem fundos chapados (impressa em preto e branco).
   Mesmas posições, ordem e espaçamentos; muda fonte, traços e títulos. ---- */
.folha.os-up { font-family: "Poppins", "Segoe UI", Arial, sans-serif; color: #1d1f23; position: relative; }
.os-up * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.os-up::before, .os-up::after { content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #00aeef 0%, #fff200 30%, #f7941d 50%, #ec268f 70%, #00aeef 100%); }
.os-up::before { top: 0; } .os-up::after { bottom: 0; }
.os-up .imp-empresa b { font-weight: 700; letter-spacing: .01em; }
.os-up .imp-empresa div { color: #3c4048; }
/* cantos levemente arredondados: borda "separate" com só as linhas internas (direita/baixo) nas células */
.os-up .imp-caixa { border: 1.5px solid #2b2e33; border-collapse: separate; border-spacing: 0; border-radius: 6px; overflow: hidden; }
.os-up .imp-caixa th, .os-up .imp-caixa td { border: 0; border-right: 1px solid #8a8f98; border-bottom: 1px solid #8a8f98; }
.os-up .imp-caixa tr > :last-child { border-right: 0; }
.os-up .imp-caixa > tbody:last-child > tr:last-child > * { border-bottom: 0; }
.os-up .os-obs { border-radius: 6px; }
.os-up .os-rodape { margin-top: 1mm; }   /* observações e totais um pouco abaixo da tabela de itens */
.os-up .imp-caixa th { background: #f2f3f5; color: #1d1f23; font-weight: 600; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.os-up .imp-itens thead th { font-size: 9px; letter-spacing: .1em; }
.os-up .os-titulo { letter-spacing: .06em; font-weight: 700; }
.os-up .os-numero { border: 2px solid #1d1f23; border-radius: 6px; font-weight: 700; letter-spacing: .02em; }
.os-up .imp-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .12em; border-left: 3px solid #ec268f; padding-left: 6px; }
.os-up .os-obs { border-color: #2b2e33; }
.os-up .os-obs b { font-size: 9.5px; letter-spacing: .08em; }
.os-up .os-totais td b { font-size: 13px; }
.os-up .os-arte { border-color: #8a8f98; border-radius: 6px; }
.os-up .assinatura { letter-spacing: .06em; }

/* ---- Orçamento do cliente: identidade da UP ---- */
.folha.orc { font-family: "Poppins", "Segoe UI", Arial, sans-serif; color: #1d1f23; font-size: 10.5px; padding: 0; display: flex; flex-direction: column; }
.orc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.orc-cab { background: #111214; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 9mm 12mm 8mm; }
.orc-logo { height: 54px; }
.orc-id { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.orc-id small { color: #00aeef; font-weight: 700; letter-spacing: .3em; font-size: 10px; }
.orc-id b { font-size: 26px; line-height: 1.1; font-weight: 700; }
.orc-id span { color: #b9bcc3; font-size: 10px; }
.orc-faixa { height: 5px; background: linear-gradient(90deg, #00aeef 0%, #fff200 30%, #f7941d 50%, #ec268f 70%, #00aeef 100%); }
.orc-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8mm 12mm 6mm; }
.orc-bloco { background: #f5f6f8; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 1px; line-height: 1.45; }
.orc-bloco:first-child { border-left: 4px solid #ec268f; }
.orc-bloco:last-child { border-left: 4px solid #00aeef; }
.orc-bloco small { font-weight: 700; letter-spacing: .2em; color: #6b7079; font-size: 9px; }
.orc-bloco b { font-size: 13px; }
.orc-bloco span { color: #4a4e56; }
.orc-itens { width: calc(100% - 24mm); margin: 0 12mm; border-collapse: collapse; }
.orc-itens th { text-align: left; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #ec268f; padding: 6px 8px; border-bottom: 2px solid #ec268f; }
.orc-itens td { padding: 9px 8px; border-bottom: 1px solid #e4e6ea; vertical-align: top; line-height: 1.45; }
.orc-itens .n { width: 6%; color: #9a9ea6; font-weight: 600; }
.orc-itens .q { width: 17%; text-align: center; white-space: nowrap; }
.orc-itens .v { width: 14%; text-align: right; white-space: nowrap; }
.orc-fim { display: grid; grid-template-columns: 1fr 72mm; gap: 12px; margin: 6mm 12mm 0; align-items: start; }
.orc-cond { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.orc-cond > div { display: flex; flex-direction: column; }
.orc-cond small { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7079; }
.orc-cond span { font-size: 11px; }
.orc-cond .orc-obs { grid-column: 1 / -1; }
.orc-total { background: #f5f6f8; border-radius: 10px; overflow: hidden; }
.orc-total > div { display: flex; justify-content: space-between; padding: 6px 14px; }
.orc-total-valor { background: #ec268f; color: #fff; align-items: center; padding: 12px 14px !important; }
.orc-total-valor span { font-weight: 700; letter-spacing: .2em; font-size: 10px; }
.orc-total-valor b { font-size: 20px; }
/* PIX nas impressões: QR Code + chave por escrito */
.imp-pix { display: flex; align-items: center; gap: 10px; border: 1.5px solid #32bcad; border-radius: 10px; padding: 6px 10px 6px 4px; margin-top: 8px; break-inside: avoid; background: #fff; }
.orc-total > .imp-pix { justify-content: flex-start; margin: 8px; padding: 6px 10px 6px 4px; }
.imp-pix svg { flex: none; }
.imp-pix > div { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: #3a3d44; line-height: 1.35; }
.imp-pix > div > b { font-size: 11px; color: #32a99c; letter-spacing: .04em; text-transform: uppercase; }
.imp-pix-valor { font-size: 15px !important; font-weight: 800; color: #1f2329 !important; }
/* janela do PIX na tela */
.pix-janela { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.pix-qr { border: 1px solid var(--linha); border-radius: 12px; padding: 6px; line-height: 0; background: #fff; }
.pix-campos { display: flex; flex-direction: column; gap: 8px; }
#pixCodigo { font-family: ui-monospace, Consolas, monospace; font-size: 11px; word-break: break-all; }
@media (max-width: 560px) { .pix-janela { grid-template-columns: 1fr; justify-items: center; } }
.orc .orc-final { margin: 9mm 12mm 0; color: #4a4e56; }
.orc .orc-assinaturas { margin: 4mm 12mm 0; }
.orc-rodape { margin-top: auto; padding-top: 8mm; text-align: center; }
.orc-rodape span { display: block; font-weight: 600; color: #ec268f; margin-bottom: 5px; font-size: 11px; }

@media print {
  @page { size: A4; margin: 0; }
  body.modo-impressao { background: #fff; }
  .barra-impressao, #toasts { display: none !important; }
  .folha { margin: 0; box-shadow: none; width: auto; min-height: auto; }
  .folha.orc { min-height: 296mm; }
  .imp-caixa th, .imp-rotulo.centro { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}