Adicione o seu HTML personalizado aqui
Sistema de Formação de Preço de Serviços - Norte Rios
Logomarca Norte Rios

Sistema de Formação de Preço de Serviços

Gerenciamento

Seção 1: Dados do Contrato e Escopo

Preencha as informações básicas para identificar o cliente, o serviço a ser prestado e o contexto geral do contrato.

(Será preenchido se tipo selecionado)

Seção 2: Custos Diretos (CD)

Detalhe todos os custos diretamente atribuíveis à execução do serviço. Isso inclui a mão de obra dos consultores e outras despesas específicas do projeto.

2.A: Mão de Obra Direta (MOD)
ℹ️ "Por Hora": Custo padrão. "Fixo Mensal": Valor recorrente todo mês. "Custo Único": Valor total pago uma única vez para um profissional específico no projeto.

Profissional/Cargo Alocação Detalhes do Custo Custo Mensal Custo Total Ação
Total Mão de Obra Direta (MOD):
R$ 0,00

2.B: Materiais Diretos e Despesas (MDDV)
ℹ️ Custos com materiais, passagens, hospedagem e outros gastos exclusivos deste contrato.

Item/Descrição Unidade Qtd Custo Unit. Custo Total Ação
Total MDDV:
R$ 0,00

Seção 3: Parâmetros de Custos, Impostos e Margens

Informe os custos indiretos, dados fiscais e a margem de lucro desejada para o cálculo do preço final.

Demonstrativo de Cálculo do Preço de Venda

Acompanhe o fluxo de cálculo que compõe o preço final do serviço com base nos dados informados.

Custo Direto Total (CDT) R$ 0,00
(+) Custo Indireto Alocado (CI) R$ 0,00
= Custo Total Base (CTB) R$ 0,00
Markup Divisor
ℹ️
0,0000
(=) Preço de Venda (CTB / Markup) R$ 0,00
(-) Desconto Proposto R$ 0,00
(=) PREÇO DE VENDA FINAL R$ 0,00

Análise de Rentabilidade e Visual

Rentabilidade do Contrato

Receita Bruta (PV Final) R$ 0,00
(-) Custos Totais (CDT + CI) R$ 0,00
(-) Impostos e Comissões R$ 0,00
(=) Lucro do Contrato R$ 0,00
Margem de Lucro Efetiva 0,00%
Ponto de Equilíbrio do Serviço R$ 0,00

Composição do Preço de Venda

Comparativo de Preços

Seção Final: Resumo para Proposta

Dados consolidados para incluir na proposta comercial e registrar o valor final negociado.

Gerando PDF...

© Norte Rios Gestão e Treinamentos. Todos os direitos reservados.

``` --- ### 2. CSS Geral (para Todos os Dispositivos) Este código define a aparência base da ferramenta. Ele é "mobile-first", o que significa que garante uma boa experiência em telas pequenas primeiro. ```css /* CSS Variables: Centraliza a paleta de cores para fácil manutenção e consistência com a marca. */ :root { --primary-dark: #304c38; --primary-light: #427443; --primary-accent: #699d6a; --secondary-action: #55b8b7; --secondary-action-hover: #429291; --bg-light: #f8fafc; --text-dark: #1e293b; --text-light: #475569; --border-color: #e2e8f0; --highlight-bg: #f0fdf4; --highlight-border: #bbf7d0; } /* Regra de escopo: Todo o estilo é aplicado dentro do ID #norte-rios-precificador para evitar conflitos com o Duda. */ #norte-rios-precificador { font-family: 'Inter', sans-serif; background-color: var(--bg-light); color: var(--text-dark); padding: 1rem; /* Espaçamento base para mobile */ } #norte-rios-precificador .main-title { font-family: 'Cairo', sans-serif; color: var(--primary-dark); font-size: 1.25rem; /* Tamanho ajustado para mobile */ text-align: center; } #norte-rios-precificador .section-card { background-color: white; border-radius: 0.75rem; border: 1px solid var(--border-color); margin-top: 2rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); overflow: hidden; } #norte-rios-precificador .section-title { background-color: var(--primary-accent); color: white; padding: 0.85rem 1.5rem; font-size: 1.1em; font-weight: 700; font-family: 'Cairo', sans-serif; border-bottom: 1px solid var(--primary-light); } #norte-rios-precificador .section-content { padding: 1rem 1.5rem; } #norte-rios-precificador .section-explanation { font-size: 0.9em; color: var(--text-light); margin-bottom: 1.5rem; max-width: 80ch; line-height: 1.6; } #norte-rios-precificador .input-group { display: flex; flex-direction: column; gap: 0.25rem; } #norte-rios-precificador .input-group label { font-weight: 500; font-size: 0.9rem; } #norte-rios-precificador .label-hint { font-size: 0.8rem; color: var(--text-light); } #norte-rios-precificador .input-field, #norte-rios-precificador select { border: 1px solid #cbd5e1; padding: 0.6rem 0.8rem; border-radius: 0.375rem; width: 100%; transition: all 0.2s ease-in-out; background-color: #f8fafc; -webkit-appearance: none; /* Remove estilos padrão do iOS */ -moz-appearance: none; appearance: none; } #norte-rios-precificador select { background-image: url('data:image/svg+xml;charset=UTF-8, '); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.5em 1.5em; padding-right: 2.5rem; } #norte-rios-precificador .input-field:focus { border-color: var(--secondary-action); outline: none; box-shadow: 0 0 0 3px rgba(85, 184, 183, 0.3); background-color: white; } #norte-rios-precificador .info-field, #norte-rios-precificador .calculated-field { padding: 0.6rem 0.8rem; border-radius: 0.375rem; width: 100%; min-height: 42px; display: flex; align-items: center; font-weight: 500; } #norte-rios-precificador .info-field { background-color: #f1f5f9; color: #475569; } #norte-rios-precificador .calculated-field { background-color: var(--highlight-bg); color: var(--primary-dark); justify-content: flex-end; } #norte-rios-precificador .final-price-field { background-color: #eef2ff; border: 1px solid #c7d2fe; } #norte-rios-precificador .table-header { color: white; font-weight: bold; background-color: var(--primary-light); } #norte-rios-precificador th, #norte-rios-precificador td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.85rem; } #norte-rios-precificador tbody tr:nth-child(even) { background-color: #f8fafc; } #norte-rios-precificador .total-row td { font-weight: bold; background-color: #e6f3e6; color: var(--primary-dark); } #norte-rios-precificador .mod-details-wrapper > div { display: none; } #norte-rios-precificador #tabelaMOD tr[data-type="por_hora"] .mod-details-hora, #norte-rios-precificador #tabelaMOD tr[data-type="fixo_mensal"] .mod-details-fixo, #norte-rios-precificador #tabelaMOD tr[data-type="custo_unico"] .mod-details-unico { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; padding: 0.25rem 0; } #norte-rios-precificador .mod-details-wrapper .input-group { flex-grow: 1; margin-bottom: 0; min-width: 120px; } #norte-rios-precificador .mod-details-wrapper .input-group label { font-size: 0.8rem; color: var(--text-light); } #norte-rios-precificador #tabelaMOD td { vertical-align: top; padding-top: 0.75rem; padding-bottom: 0.75rem; } #norte-rios-precificador .btn { padding: 0.6rem 1rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; transition: all 0.2s ease-in-out; border: 1px solid transparent; } #norte-rios-precificador .btn span { display: block; } #norte-rios-precificador .btn svg { width: 1rem; height: 1rem; } #norte-rios-precificador .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } #norte-rios-precificador .btn:disabled { background-color: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; } #norte-rios-precificador .btn-primary { background-color: var(--secondary-action); color: white; } #norte-rios-precificador .btn-pdf { background-color: #b91c1c; color: white; } #norte-rios-precificador .btn-save { background-color: #1d4ed8; color: white; } #norte-rios-precificador .btn-load { background-color: #d97706; color: white; } #norte-rios-precificador .btn-delete { background-color: #64748b; color: white; } #norte-rios-precificador .btn-new { background-color: #be123c; color: white; } #norte-rios-precificador .remove-row-btn { background-color: #ef4444; color: white; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 1em; line-height: 1; font-weight: bold; border: none; } #norte-rios-precificador .remove-row-btn:hover { background-color: #dc2626; transform: scale(1.1); } #norte-rios-precificador .loading-indicator { font-style: italic; color: var(--primary-light); margin-left: 10px; display: none; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background-color: white; padding: 25px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.25); width: 90%; max-width: 480px; text-align: center; transform: scale(0.95); transition: transform 0.3s; } .modal-overlay.active .modal-content { transform: scale(1); } .modal-title { font-size: 1.3em; font-weight: bold; color: var(--primary-dark); margin-bottom: 15px; font-family: 'Cairo', sans-serif; } .modal-message { font-size: 1em; color: var(--text-light); margin-bottom: 25px; line-height: 1.6; } .modal-button { border: none; padding: 10px 22px; border-radius: 6px; cursor: pointer; font-size: 0.95em; font-weight: bold; transition: background-color 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .modal-button:hover { transform: translateY(-1px); } .modal-button-ok { background-color: var(--secondary-action); color: white; } .modal-button-confirm { background-color: #e53e3e; color: white; } .modal-button-cancel { background-color: #d1d5db; color: #374151; } .modal-buttons-container { display: flex; justify-content: center; gap: 10px; } #norte-rios-precificador .tooltip { position: relative; display: inline-block; cursor: help; margin-left: 5px; color: var(--primary-accent); font-weight: bold; } #norte-rios-precificador .tooltip .tooltiptext { visibility: hidden; width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 50; bottom: 135%; left: 50%; margin-left: -125px; opacity: 0; transition: opacity 0.3s; font-size: 0.85em; font-weight: normal; font-family: 'Inter', sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } #norte-rios-precificador .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } #norte-rios-precificador .chart-container { background-color: white; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border-color); } #norte-rios-precificador .calculation-statement { background-color: var(--highlight-bg); border: 1px solid var(--highlight-border); border-radius: 0.5rem; padding: 1rem; } #norte-rios-precificador .calculation-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border-color); } #norte-rios-precificador .calculation-row:last-child { border-bottom: none; } #norte-rios-precificador .calculation-label { font-weight: 500; color: var(--text-light); } #norte-rios-precificador .calculation-value { font-weight: 700; color: var(--primary-dark); font-size: 1.1em; } #norte-rios-precificador .calculation-final-value { font-weight: 700; font-size: 1.5em; color: white; background-color: var(--primary-dark); padding: 0.5rem 1rem; border-radius: 0.375rem; }
Adicione o seu HTML personalizado aqui