@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--fundo:#f3f5f8;--branco:#fff;--texto:#172033;--muted:#778196;--linha:#e4e8ef;--azul:#2458d3;--azul-claro:#edf3ff;--verde:#14845b;--vermelho:#c23b45}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:'DM Sans',Arial,sans-serif;text-transform:uppercase}
.app{width:calc(100% - 40px);max-width:1600px;margin:0 auto;padding:30px 0 24px}
.topo{display:flex;align-items:center;justify-content:space-between;padding:5px 0 24px;border-bottom:1px solid #dfe4ec}
.marca{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.07em;font-size:14px}
.marca-icone{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--texto);color:white;font-size:22px}
.marca-clara{color:#8791a3;font-weight:500}
.limite{font-size:11px;letter-spacing:.08em;color:#687389;display:flex;align-items:center;gap:8px}
.limite strong{font-size:13px;color:var(--texto);letter-spacing:0}
.ponto{width:7px;height:7px;background:#19a875;border-radius:50%}
.intro{padding:42px 0 28px}
.sobretitulo{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--azul);margin:0 0 10px}
h1{font:700 clamp(28px,5vw,40px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:0}
.descricao{color:#687389;max-width:640px;font-size:14px;line-height:1.65;margin:12px 0 0}
.painel,.resultado{background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:24px;margin-bottom:18px;box-shadow:0 5px 20px #1d2a4407}
.secao-cabecalho,.resultado-topo{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.secao-cabecalho>div,.resultado-topo>div{display:flex;align-items:center;gap:11px}
.numero-secao{font:700 11px 'Space Grotesk',sans-serif;color:var(--azul);background:var(--azul-claro);border-radius:7px;padding:7px 8px}
h2{font:700 17px 'Space Grotesk',sans-serif;margin:0;letter-spacing:-.02em}
.unidade,.tag-resultado{font-size:9px;letter-spacing:.1em;font-weight:800;color:#8791a3}
.itens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.item{border:1px solid var(--linha);border-radius:10px;padding:10px;margin:0;background:#fff;min-width:0}
.item-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.item-ident{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.08em}
.item-numero{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#f0f2f6;color:#536078;font:700 11px 'Space Grotesk',sans-serif}
.remover{border:0;background:transparent;color:#9aa3b2;font-size:23px;line-height:1;cursor:pointer;width:30px;height:30px;border-radius:7px}
.remover:hover{background:#fff0f0;color:var(--vermelho)}
.campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.campo-descricao{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo>span{font-size:9px;font-weight:800;letter-spacing:.08em;color:#687389}
.campo small{font-size:9px;color:#98a1b0;font-weight:500;letter-spacing:0}
input{width:100%;height:31px;border:1px solid #dfe4ec;border-radius:8px;padding:0 11px;font:500 13px 'DM Sans',sans-serif;color:var(--texto);background:#fff;outline:none;min-width:0}
input:focus{border-color:var(--azul);box-shadow:0 0 0 3px #2458d315}
input::placeholder{color:#b1b8c4}
.item-resultado{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;padding:11px 13px;background:#f7f9fc;border-radius:8px}
.resultado-label{font-size:9px;letter-spacing:.08em;font-weight:800;color:#7b8598}
.tamanho-item{font:700 13px 'Space Grotesk',sans-serif;color:var(--azul)}
.detalhe-item{font-size:11px;color:#8791a3}
.erro-item{display:none;color:var(--vermelho);font-size:11px;margin:9px 0 0}
.erro-item.ativo{display:block}
.adicionar{display:flex;grid-column:1/-1;align-items:center;justify-content:center;gap:10px;width:100%;height:47px;border:1px dashed #9aaddb;border-radius:9px;background:#f8faff;color:var(--azul);font:800 10px 'DM Sans',sans-serif;letter-spacing:.1em;cursor:pointer;transition:.15s}
.adicionar:hover{background:var(--azul-claro);border-color:var(--azul)}
.adicionar span{font-size:21px;font-weight:400;line-height:0}
.ajuda{font-size:11px;color:#929bad;margin:12px 0 0}
.resultado{background:#172033;color:white;border:0;padding:24px}
.numero-claro{background:#293750;color:#9eb9ff}
.resultado-topo{margin-bottom:19px}
.tag-resultado{color:#aab5c8}
.resultado-grade{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.6fr);gap:16px;align-items:start}.resultado-dados{min-width:0}.resumo-itens{border-top:1px solid #344057;border-bottom:1px solid #344057;padding:5px 0;margin-bottom:20px}
.vazio{color:#aab5c8;font-size:12px;margin:12px 0}
.linha-resumo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid #2c3850;font-size:12px}
.linha-resumo:last-child{border-bottom:0}
.linha-resumo span:first-child{color:#dce3ef;overflow-wrap:anywhere}
.linha-resumo span:nth-child(2){color:#aab5c8;font-size:11px}
.linha-resumo strong{font:600 12px 'Space Grotesk',sans-serif;color:#a9c1ff;white-space:nowrap}
.totais{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:12px}
.total-principal,.total-secundario{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:10px;background:#202c42}
.total-principal>span,.total-secundario>span,.total-secundario>label{font-size:9px;letter-spacing:.1em;font-weight:800;color:#aab5c8}
.total-principal strong{font:700 clamp(23px,4vw,30px) 'Space Grotesk',sans-serif;color:#fff}
.total-principal small{font-size:10px;color:#aab5c8}
.total-secundario{justify-content:center}
.total-secundario strong{font:700 19px 'Space Grotesk',sans-serif;color:#fff}
.total-secundario.valor strong{color:#7ce0b6}.entrada-moeda{display:flex;align-items:center;height:36px;margin:0 0 7px;background:#fff;border:1px solid #dfe4ec;border-radius:8px;overflow:hidden}.entrada-moeda>span{padding-left:11px;color:#536078;font-size:13px;font-weight:700}.total-secundario.valor .entrada-moeda input{border:0;box-shadow:none;margin:0;height:34px;background:transparent;color:var(--texto);padding-left:6px}.copiar-resumo{margin-top:8px;width:100%;min-height:36px;padding:8px 10px;border:1px solid #5473b5;border-radius:8px;background:#2b4166;color:#fff;font:800 9px 'DM Sans',sans-serif;letter-spacing:.07em;cursor:pointer}.copiar-resumo:hover{background:#365486}.status-copia{min-height:12px;color:#7ce0b6;font-size:9px}
.nota{font-size:10px;line-height:1.6;color:#aab5c8;margin:15px 2px 0}
footer{text-align:center;padding:12px 0;color:#9aa3b2;font-size:9px;letter-spacing:.14em;font-weight:700}
@media(max-width:900px){.resultado-grade{grid-template-columns:minmax(150px,.6fr) minmax(0,1.4fr)}.visualizacao{padding:11px}.folha-preview{max-height:420px;padding:7px}}
@media(max-width:760px){.resultado-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.visualizacao{max-width:100%}.folha-preview{max-height:480px}.totais{grid-template-columns:1fr}.total-principal{grid-column:auto}.unidade{display:none}}
@media(max-width:850px){.itens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.itens{grid-template-columns:1fr}.item{padding:9px}.item-topo{margin-bottom:8px}.campos{gap:6px}.campo>span{font-size:8px}.campo small{font-size:8px}.campos input{padding:0 6px;font-size:12px}}
@media(max-width:460px){.app{width:min(100% - 24px,1000px);padding-top:16px}.intro{padding:32px 0 22px}.painel,.resultado{padding:17px}.secao-cabecalho,.resultado-topo{align-items:flex-start}.tag-resultado{font-size:8px;text-align:right}.campos{gap:10px}.totais{gap:8px}.total-secundario{padding:12px}.total-secundario strong{font-size:16px}.linha-resumo{grid-template-columns:minmax(0,1fr) auto;gap:8px}.linha-resumo span:nth-child(2){display:none}}

/* VISUALIZAÇÃO DA FOLHA */
.visualizacao{margin:0 0 20px;padding:16px;background:#1d2940;border:1px solid #344057;border-radius:11px}
.visualizacao-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.visualizacao-topo>div{display:flex;align-items:center;gap:10px}
.visualizacao-topo h2{font-size:15px;color:#fff}
.folha-preview{width:100%;max-height:680px;overflow:auto;background:#fff;border-radius:5px;padding:12px;display:flex;justify-content:center;align-items:flex-start}
.folha-preview svg{display:block;width:100%;height:auto;max-width:none}
.folha-preview .vazio{color:#8791a3;text-align:center;line-height:1.6}
.legenda-preview{display:flex;align-items:center;gap:8px;color:#aab5c8;font-size:9px;font-weight:700;letter-spacing:.08em;margin-top:11px}
.legenda-preview span{width:12px;height:12px;border:1px solid #9ca3af;background:#fff;display:inline-block}
input{text-transform:uppercase}
@media(max-width:460px){.resultado-grade{gap:10px}.visualizacao{padding:11px}.visualizacao-topo{align-items:flex-start}.visualizacao-topo .tag-resultado{max-width:115px;line-height:1.4}}

.controles-preview{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.controles-preview button{border:1px solid #62718a;background:#2b3b58;color:#fff;border-radius:6px;padding:8px 10px;font-size:10px;font-weight:800;cursor:pointer}
.controles-preview button:disabled{opacity:.4;cursor:not-allowed}
.controles-preview button[hidden]{display:none}
.controles-preview span{font-size:9px;color:#c3ccda;font-weight:700}
.folha-preview svg .peca-preview{cursor:grab;transition:opacity .12s;touch-action:none}.folha-preview svg .peca-preview:active{cursor:grabbing}.folha-preview svg{touch-action:none;user-select:none}
.folha-preview svg .peca-preview.selecionada{stroke:#e11d48!important;stroke-width:2!important;stroke-dasharray:2 1}

/* Ajustes da reorganização por arraste */
.controles-preview #limparTudo{margin-left:auto;background:#8b2635;border-color:#a94a57}
.controles-preview #limparTudo:hover{background:#a52d40}
.folha-preview svg .peca-preview{cursor:grab;transition:opacity .12s;touch-action:none}
.folha-preview svg .peca-preview:active{cursor:grabbing}
.folha-preview svg .indicador-insercao{stroke:#e11d48;stroke-width:1.5;stroke-dasharray:0;pointer-events:none}
.folha-preview svg .indicador-insercao-ponta{fill:#e11d48;pointer-events:none}

/* Ações do cabeçalho de itens */
.acoes-itens{display:flex;align-items:center;gap:12px}
.botao-limpar{border:1px solid #a94a57;background:#8b2635;color:#fff;border-radius:7px;padding:8px 11px;font-size:9px;font-weight:800;letter-spacing:.06em;cursor:pointer}
.botao-limpar:hover{background:#a52d40}
.controles-preview #reordenarPadrao{background:#34445f;border-color:#62718a}
.controles-preview #reordenarPadrao:hover{background:#405575}
.folha-preview svg .indicador-insercao{stroke:#e11d48;stroke-width:1.8;pointer-events:none}
@media(max-width:560px){.acoes-itens{align-items:flex-end;flex-direction:column;gap:7px}.botao-limpar{padding:7px 9px}}


/* MODAL DE EXPORTAÇÃO E SALVAMENTO DA PRÉVIA */
.modal-exportar{width:min(480px,calc(100% - 28px));max-width:480px;border:1px solid #dfe4ec;border-radius:14px;padding:22px;background:#fff;color:var(--texto);box-shadow:0 24px 80px #11182740}
.modal-exportar::backdrop{background:#101827a8;backdrop-filter:blur(2px)}
.modal-exportar form{margin:0}
.modal-exportar-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-exportar-topo>div{display:flex;align-items:center;gap:10px}
.modal-exportar-topo h2{font-size:17px}
.fechar-modal{width:32px;height:32px;border:0;border-radius:7px;background:#f0f2f6;color:#536078;font-size:24px;line-height:1;cursor:pointer}
.modal-explica{font-size:10px;line-height:1.5;color:#778196;font-weight:800;letter-spacing:.06em;margin:18px 0 12px}
.opcoes-resumo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcoes-resumo label{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e4e8ef;border-radius:8px;font-size:9px;font-weight:800;color:#536078;cursor:pointer}
.opcoes-resumo input{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--azul)}
.modal-exportar-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal-exportar-acoes button,.botao-imagem{min-height:36px;padding:9px 12px;border-radius:7px;font-size:9px;font-weight:800;letter-spacing:.05em;cursor:pointer}
.botao-secundario{border:1px solid #dfe4ec;background:#f7f9fc;color:#536078}
.botao-confirmar{border:1px solid #2458d3;background:#2458d3;color:#fff}
.botao-imagem{display:block;width:100%;margin-top:12px;border:1px solid #5473b5;background:#2b4166;color:#fff}
.botao-imagem:hover{background:#365486}
@media(max-width:460px){.modal-exportar{padding:17px}.opcoes-resumo{grid-template-columns:1fr}.modal-exportar-acoes{flex-direction:column-reverse}.modal-exportar-acoes button{width:100%}}

/* RESUMO SEMPRE AO LADO DA VISUALIZAÇÃO, INCLUSIVE NO CELULAR */
@media(max-width:560px){
  .visualizacao{padding:8px}
  .visualizacao-topo{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:10px}
  .visualizacao-topo .tag-resultado{display:none}
  .visualizacao-topo h2{font-size:12px}
  .folha-preview{padding:4px}
  .controles-preview button{padding:6px 7px;font-size:8px}
  .controles-preview span{font-size:8px}
  .legenda-preview{font-size:8px}
  .botao-imagem{font-size:8px;padding:8px}
  .total-principal,.total-secundario{padding:10px}
  .total-principal strong{font-size:20px}
  .total-secundario strong{font-size:15px}
  .linha-resumo{font-size:10px}
  .nota{font-size:9px}
}


/* IMAGEM OPCIONAL POR ITEM */
.campo-imagem{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.rotulo-imagem{font-size:9px;font-weight:800;letter-spacing:.08em;color:#687389}
.rotulo-imagem small{font-size:9px;color:#98a1b0;font-weight:500;letter-spacing:0}
.imagem-controles{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.imagem-miniatura{width:40px;height:40px;object-fit:cover;border-radius:7px;border:1px solid #dfe4ec;background:#f0f2f6}
.imagem-miniatura[hidden],.imagem-remover[hidden]{display:none}
.botao-imagem-item,.imagem-remover{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:0 11px;border:1px dashed #9aaddb;border-radius:8px;background:#f8faff;color:var(--azul);font:800 9px 'DM Sans',sans-serif;letter-spacing:.07em;cursor:pointer}
.botao-imagem-item:hover{background:var(--azul-claro);border-color:var(--azul)}
.imagem-remover{border:1px solid #e4e8ef;border-style:solid;background:#fff;color:var(--vermelho)}
.imagem-remover:hover{background:#fff0f0}

/* MODAL COM PRÉ-VISUALIZAÇÃO AO LADO */
.modal-exportar{width:min(920px,calc(100% - 28px));max-width:920px}
.modal-exportar-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:stretch}
.modal-exportar .opcoes-resumo{grid-template-columns:1fr}
.modal-coluna-previa{display:flex;flex-direction:column;min-width:0}
.previa-resumo{flex:1;margin:0;min-height:260px;max-height:55vh;overflow:auto;padding:14px;border:1px solid #e4e8ef;border-radius:10px;background:#f7f9fc;color:var(--texto);font:500 12px/1.6 'DM Sans',Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;text-transform:uppercase}
.previa-resumo.previa-vazia{color:#98a1b0;font-weight:800;font-size:10px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center}
.botao-confirmar:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.modal-exportar-corpo{grid-template-columns:1fr;gap:4px}.previa-resumo{min-height:160px;max-height:32vh}}