portal_publico/templates/custo-contratacao.html

590 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% load static %}
<!DOCTYPE html>
<html lang="pt-BR" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portal De Paula — Simulação de Custo de Contratação</title>
<link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
<link rel="stylesheet" href="{% static 'css/tokens.css' %}" />
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
<link rel="stylesheet" href="{% static 'css/layout.css' %}" />
<link rel="stylesheet" href="{% static 'css/components.css' %}" />
<link rel="stylesheet" href="{% static 'css/custo-contratacao.css' %}" />
<script src="{% static 'js/theme.js' %}" defer></script>
</head>
<body>
<div class="app-shell" id="app-shell">
<aside class="sidebar">
<div class="sidebar__brand">
<img class="sidebar__logo" src="{% static 'img/logo-branco.png' %}" alt="De Paula Contadores" />
</div>
<nav class="sidebar__nav">
<ul class="nav-list">
<li data-section="principal">
<a href="portal.html" class="nav-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Principal</span>
</a>
</li>
<li data-section="ramais">
<a href="ramais.html" class="nav-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4c0 9 7 16 16 16l3-4-6-3-2 2c-3-1.5-5-3.5-6-6l2-2-3-6z" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Ramais</span>
</a>
</li>
<li data-section="calendario">
<a href="#" class="nav-item" id="calendario-depaula-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/></svg>
<span class="nav-item__label">Calendário De Paula</span>
</a>
</li>
<li data-section="calendario-individual">
<a href="calendario-individual.html" class="nav-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/><path d="M9 15l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Calendário Individual</span>
</a>
</li>
<li data-section="portais" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
<span class="nav-item__label">Portais</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="portal-do-cliente"><a href="#" class="nav-subitem">Portal do Cliente</a></li>
<li data-app="portal-fiscal"><a href="#" class="nav-subitem">Portal Fiscal</a></li>
</ul>
</li>
<li data-section="geradoc" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Geradoc</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="simulacao-custo-contratacao"><a href="custo-contratacao.html" class="nav-subitem is-active">Simulação de Custo de Contratação</a></li>
<li data-app="indicador-desempenho"><a href="indicador-desempenho.html" class="nav-subitem">Indicador de Desempenho</a></li>
</ul>
</li>
<li data-section="relatorios" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M12 20V4M20 20v-7" stroke-linecap="round"/></svg>
<span class="nav-item__label">Relatórios</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="relatorio-setorial"><a href="#" class="nav-subitem">Relatório Setorial</a></li>
<li data-app="indicadores"><a href="#" class="nav-subitem">Indicadores</a></li>
</ul>
</li>
<li data-section="relatorios-gerenciais" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18M7 15l4-5 3 3 5-7" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Relatórios Gerenciais</span>
<span class="badge-restricted" data-restricted-badge hidden>Restrito</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="visao-diretoria"><a href="#" class="nav-subitem">Visão Diretoria</a></li>
<li data-app="visao-gerencial"><a href="#" class="nav-subitem">Visão Gerencial</a></li>
</ul>
</li>
<li data-section="utilitarios" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg>
<span class="nav-item__label">Utilitários</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="importacao-plano-saude"><a href="importacao-plano-saude.html" class="nav-subitem">Importação de Plano de Saúde</a></li>
</ul>
</li>
<li data-section="integracoes" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M8.6 10.6L15.4 7.4M8.6 13.4l6.8 3.2" stroke-linecap="round"/></svg>
<span class="nav-item__label">Integrações</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="questor"><a href="#" class="nav-subitem">Questor</a></li>
</ul>
</li>
<li data-section="auditorias" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7z" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Auditorias</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li class="nav-subgroup" data-subgroup="consultoria-tributaria">
<button type="button" class="nav-subitem nav-subgroup__toggle" data-subgroup-toggle>
<span>Consultoria Tributária</span>
<svg class="nav-item__chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-subgroup__list">
<li data-app="controle-simples-nacional">
<a href="#" class="nav-subitem nav-subitem--tool">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/><path d="M14 2v4h4" stroke-linejoin="round"/></svg>
Controle Simples Nacional
</a>
</li>
</ul>
</li>
<li class="nav-subgroup" data-subgroup="fisco-contabil">
<button type="button" class="nav-subitem nav-subgroup__toggle" data-subgroup-toggle>
<span>Fisco/Contábil</span>
<svg class="nav-item__chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-subgroup__list">
<li data-app="auditoria-de-balancetes">
<a href="#" class="nav-subitem nav-subitem--tool">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/><path d="M14 2v4h4" stroke-linejoin="round"/></svg>
Auditoria de Balancetes
</a>
</li>
</ul>
</li>
</ul>
</li>
<li data-section="links-ferramentas" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>
<span class="nav-item__label">Links &amp; Ferramentas</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="links-ferramentas-visualizar"><a href="links-ferramentas.html" class="nav-subitem">Links &amp; Ferramentas</a></li>
<li data-app="acessos-gerais-visualizar"><a href="acessos-gerais.html" class="nav-subitem">Acessos Gerais</a></li>
</ul>
</li>
<li data-section="solicitacoes" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 10h.01M12 10h.01M16 10h.01M21 12a9 9 0 1 1-4.4-7.7L21 3l-1.2 4.5A8.96 8.96 0 0 1 21 12z"/></svg>
<span class="nav-item__label">Solicitações</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-app="controle-notificacoes"><a href="https://form.asana.com/?k=PcELrDLzN969CwpiRBLtFA&amp;d=1207308016523218" target="_blank" rel="noopener noreferrer" class="nav-subitem">Controle de Notificações</a></li>
<li data-app="ordem-servico"><a href="#" class="nav-subitem">Ordem de Serviço</a></li>
<li data-app="pimi"><a href="https://form.asana.com/?k=XfBww25lGUyPVrInNcLyuQ&amp;d=1207308016523218" target="_blank" rel="noopener noreferrer" class="nav-subitem">P.I.M.I.</a></li>
<li data-app="programa-indicacoes"><a href="https://form.asana.com/?k=y0mTeaRTOAoC0r0XP8ee0Q&amp;d=1207308016523218" target="_blank" rel="noopener noreferrer" class="nav-subitem">Programa de Indicações</a></li>
<li data-app="pos-vendas"><a href="https://form.asana.com/?k=jRAztLip-_BknWPsGmEcZA&amp;d=1207308016523218" target="_blank" rel="noopener noreferrer" class="nav-subitem">Pós-Vendas</a></li>
<li data-app="sugestao-inovacao"><a href="https://form.asana.com/?k=Zn8cLeT97R7FTUrsNB8Yaw&amp;d=1207308016523218" target="_blank" rel="noopener noreferrer" class="nav-subitem">Sugestão de Inovação</a></li>
</ul>
</li>
<li data-section="administracao" class="nav-group">
<button type="button" class="nav-item nav-group__toggle" data-group-toggle>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" stroke-linejoin="round"/></svg>
<span class="nav-item__label">Administração</span>
<svg class="nav-item__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="nav-group__list">
<li data-section="perfis-acesso"><a href="perfis-acesso.html" class="nav-subitem">Perfis de Acesso</a></li>
<li data-section="usuarios"><a href="usuarios.html" class="nav-subitem">Usuários</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<div class="main-content">
<header class="topbar">
<button type="button" class="icon-btn" id="sidebar-toggle" aria-label="Alternar menu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"/></svg>
</button>
<h1 class="topbar__title">Simulação de Custo de Contratação</h1>
<div class="topbar__actions">
<button type="button" class="icon-btn" id="theme-toggle" aria-label="Ativar modo claro">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke-linecap="round"/></svg>
</button>
<div class="notifications">
<button type="button" class="icon-btn" id="notif-bell" aria-label="Notificações">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" stroke-linejoin="round"/><path d="M9.5 20a2.5 2.5 0 0 0 5 0"/></svg>
<span class="notif-badge" id="notif-badge" hidden>0</span>
</button>
<div class="notif-dropdown" id="notif-dropdown" hidden>
<div class="notif-dropdown__header">
<span>Notificações</span>
<div class="notif-dropdown__header-actions">
<button type="button" id="notif-history-btn">Histórico</button>
<button type="button" id="notif-clear-all">Limpar tudo</button>
</div>
</div>
<ul class="notif-list" id="notif-list"></ul>
</div>
</div>
<div class="account-menu">
<button type="button" class="persona-chip" id="persona-chip">
<span class="persona-chip__icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="7" r="4"/></svg>
</span>
<span id="persona-chip-label">Usuário</span>
</button>
<div class="account-dropdown" id="account-dropdown" hidden>
<div class="account-dropdown__header">
<p class="account-dropdown__name" id="account-name"></p>
<p class="account-dropdown__profile" id="account-profile"></p>
</div>
<button type="button" class="account-dropdown__item" id="account-manage-account-btn">Gerenciar Usuário</button>
<a href="perfis-acesso.html" class="account-dropdown__item" id="account-manage-link" hidden>Gerenciar Perfis de Acesso</a>
<div class="account-dropdown__section">
<p class="account-dropdown__section-title">Tema de cores</p>
<div class="theme-swatches" id="theme-swatches"></div>
</div>
<button type="button" class="account-dropdown__item account-dropdown__logout" data-logout>Sair</button>
</div>
</div>
</div>
</header>
<main class="page-content page-content--wide">
<div id="cc-no-access" class="no-access" hidden>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h2>Sem acesso à Simulação de Custo de Contratação</h2>
<p>Seu perfil de acesso não tem permissão para usar esta ferramenta. Solicite à Integração e Inovação a liberação em Perfis de Acesso.</p>
</div>
<div id="cc-content">
<div class="cc-header">
<div>
<h2>Simulação de Custo de Contratação</h2>
<p class="cc-subtitle">Regime Empregado CLT. Preencha os dados abaixo e gere um PDF com o custo total para o empregador e o valor líquido recebido pelo empregado.</p>
</div>
</div>
<div class="cc-painel-fiscal" id="cc-painel-fiscal">
<button type="button" class="cc-painel-fiscal__toggle" id="cc-painel-fiscal-toggle" aria-expanded="false">
<svg class="cc-painel-fiscal__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
Ver/editar tabelas de INSS e IRRF
</button>
<div class="cc-painel-fiscal__body" id="cc-painel-fiscal-body" hidden>
<p class="cc-subtitle">Edite aqui quando a Receita Federal/INSS publicar novos valores. A alteração vale para todas as simulações seguintes.</p>
<div class="cc-section">
<h3 class="cc-section__title">Tabela INSS (empregado)</h3>
<table class="cc-tabela-fiscal" id="cc-tabela-inss">
<thead>
<tr><th>Até (R$)</th><th>Alíquota (%)</th><th>Deduzir (R$)</th><th></th></tr>
</thead>
<tbody id="cc-tabela-inss-body"></tbody>
</table>
<button type="button" class="btn-outline cc-tabela-fiscal__add" id="cc-inss-add-btn">+ Adicionar faixa</button>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-inss-teto">Teto do desconto de INSS (valor fixo acima da última faixa)</label>
<input type="text" id="cc-inss-teto" autocomplete="off" />
</div>
</div>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Tabela IRRF</h3>
<table class="cc-tabela-fiscal" id="cc-tabela-irrf">
<thead>
<tr><th>Até (R$)</th><th>Alíquota (%)</th><th>Deduzir (R$)</th><th></th></tr>
</thead>
<tbody id="cc-tabela-irrf-body"></tbody>
</table>
<button type="button" class="btn-outline cc-tabela-fiscal__add" id="cc-irrf-add-btn">+ Adicionar faixa</button>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-irrf-topo-aliquota">Alíquota acima da última faixa (%)</label>
<input type="text" id="cc-irrf-topo-aliquota" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-irrf-topo-deduzir">Deduzir acima da última faixa (R$)</label>
<input type="text" id="cc-irrf-topo-deduzir" autocomplete="off" />
</div>
</div>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Descontos fixos</h3>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-desconto-simplificado">Desconto simplificado do IRRF (R$)</label>
<input type="text" id="cc-desconto-simplificado" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-deducao-dependente">Dedução por dependente (R$)</label>
<input type="text" id="cc-deducao-dependente" autocomplete="off" />
</div>
</div>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Redução Lei 15.270/2025</h3>
<p class="cc-subtitle">Redução adicional de IRRF (isenção até R$5.000, decrescente até zerar no limite abaixo), aplicada por cima da tabela tradicional: redução = coeficiente A − (coeficiente B × rendimento bruto mensal).</p>
<div class="modal-field-row cc-field-row--3">
<div class="modal-field">
<label for="cc-lei15270-a">Coeficiente A (R$)</label>
<input type="text" id="cc-lei15270-a" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-lei15270-b">Coeficiente B</label>
<input type="text" id="cc-lei15270-b" placeholder="Ex.: 0.133145" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-lei15270-limite">Limite (R$)</label>
<input type="text" id="cc-lei15270-limite" autocomplete="off" />
</div>
</div>
</div>
<p class="modal-error" id="cc-painel-fiscal-error"></p>
<p class="cc-painel-fiscal__status" id="cc-painel-fiscal-status" hidden></p>
<div class="modal-actions">
<button type="button" class="btn-solid" id="cc-painel-fiscal-salvar-btn">Salvar tabelas</button>
</div>
</div>
</div>
<form class="cc-form" id="cc-form" novalidate>
<div class="modal-field">
<label for="cc-nome-referencia">Nome da simulação / cliente (opcional)</label>
<input type="text" id="cc-nome-referencia" placeholder="Ex.: João da Silva" autocomplete="off" />
</div>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-empresa">Empresa (opcional)</label>
<input type="text" id="cc-empresa" placeholder="Ex.: Empresa XYZ" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-cargo">Cargo (opcional)</label>
<input type="text" id="cc-cargo" placeholder="Ex.: Analista Fiscal" autocomplete="off" />
</div>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Remuneração</h3>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-salario">Salário contratual</label>
<input type="text" id="cc-salario" placeholder="Ex.: 8.500,00" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-adicional">Adicional Art. 62.</label>
<input type="text" id="cc-adicional" placeholder="Ex.: 3.400,00 ou 40%" autocomplete="off" />
</div>
</div>
<div class="modal-field-row">
<div class="modal-field">
<label for="cc-comissao">Comissão</label>
<input type="text" id="cc-comissao" placeholder="0,00" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-dsr">DSR</label>
<input type="text" id="cc-dsr" placeholder="0,00" autocomplete="off" />
</div>
</div>
<p class="cc-subtitle">Itens adicionais somam à base de cálculo do INSS, FGTS, 13º, férias e IRRF, junto com o salário.</p>
<table class="cc-tabela-fiscal cc-tabela-itens" id="cc-remuneracao-outros-tabela">
<thead>
<tr><th>Outro item de remuneração</th><th>Valor (R$)</th><th></th></tr>
</thead>
<tbody id="cc-remuneracao-outros-body"></tbody>
</table>
<button type="button" class="btn-outline cc-tabela-fiscal__add" id="cc-remuneracao-outros-add-btn">+ Adicionar item de remuneração</button>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Encargos</h3>
<div class="modal-field-row cc-field-row--3">
<div class="modal-field">
<label for="cc-perc-inss">% de INSS Empregador</label>
<input type="text" id="cc-perc-inss" placeholder="Ex.: 26" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-perc-fgts">% de FGTS</label>
<input type="text" id="cc-perc-fgts" placeholder="Ex.: 8" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-dependentes">Dependentes menores de 21 anos</label>
<input type="number" id="cc-dependentes" min="0" step="1" placeholder="Ex.: 0" />
</div>
</div>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Benefícios</h3>
<p class="cc-subtitle">Custo do empregador — entram no Custo Total Empresa como custo variável, sem afetar o valor líquido do empregado.</p>
<div class="modal-field-row cc-field-row--3">
<div class="modal-field">
<label for="cc-vale-transporte">Vale Transporte</label>
<input type="text" id="cc-vale-transporte" placeholder="Ex.: 220,00" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-seguro-vida">Seguro de vida</label>
<input type="text" id="cc-seguro-vida" placeholder="Ex.: 15,00" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-vale-alimentacao">Vale Alimentação</label>
<input type="text" id="cc-vale-alimentacao" placeholder="Ex.: 600,00" autocomplete="off" />
</div>
</div>
<div class="modal-field-row cc-field-row--3">
<div class="modal-field">
<label for="cc-assiduidade">Assiduidade</label>
<input type="text" id="cc-assiduidade" placeholder="Ex.: 100,00" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-fundo-formacao">Fundo de Formação</label>
<input type="text" id="cc-fundo-formacao" placeholder="Ex.: 50,00" autocomplete="off" />
</div>
</div>
<table class="cc-tabela-fiscal cc-tabela-itens" id="cc-beneficios-outros-tabela">
<thead>
<tr><th>Outro benefício</th><th>Valor (R$)</th><th></th></tr>
</thead>
<tbody id="cc-beneficios-outros-body"></tbody>
</table>
<button type="button" class="btn-outline cc-tabela-fiscal__add" id="cc-beneficios-outros-add-btn">+ Adicionar benefício</button>
</div>
<div class="cc-section">
<h3 class="cc-section__title">Descontos</h3>
<p class="cc-subtitle">Descontados direto do empregado — reduzem o valor líquido, sem afetar o custo total para o empregador. Aceitam valor em reais ou percentual do salário contratual (ex.: "6%").</p>
<div class="modal-field-row cc-field-row--3">
<div class="modal-field">
<label for="cc-desconto-vale-transporte">Vale Transporte</label>
<input type="text" id="cc-desconto-vale-transporte" placeholder="0,00 ou 6%" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-desconto-vale-alimentacao">Vale Alimentação</label>
<input type="text" id="cc-desconto-vale-alimentacao" placeholder="0,00 ou 10%" autocomplete="off" />
</div>
<div class="modal-field">
<label for="cc-desconto-sindicato">Desconto Sindicato</label>
<input type="text" id="cc-desconto-sindicato" placeholder="0,00 ou 1%" autocomplete="off" />
</div>
</div>
<table class="cc-tabela-fiscal cc-tabela-itens" id="cc-descontos-outros-tabela">
<thead>
<tr><th>Outro desconto</th><th>Valor (R$ ou %)</th><th></th></tr>
</thead>
<tbody id="cc-descontos-outros-body"></tbody>
</table>
<button type="button" class="btn-outline cc-tabela-fiscal__add" id="cc-descontos-outros-add-btn">+ Adicionar desconto</button>
</div>
<p class="modal-error" id="cc-form-error"></p>
<div class="modal-actions">
<button type="button" class="btn-outline" id="cc-form-limpar-btn">Limpar</button>
<button type="submit" class="btn-solid" id="cc-form-submit-btn">Gerar PDF</button>
</div>
</form>
</div>
</main>
</div>
</div>
<div class="modal-overlay" id="manage-account-modal" hidden>
<div class="modal-card">
<h2 class="modal-card__title">Gerenciar Usuário</h2>
<div class="modal-field">
<button type="button" class="btn-outline" id="manage-account-change-password-btn">Alterar senha</button>
</div>
<div class="modal-field" id="manage-account-liderados-field" hidden>
<label>Usuários sob sua liderança</label>
<input type="text" id="manage-account-liderados-search" class="checklist-search" placeholder="Buscar por nome ou departamento..." autocomplete="off" />
<label class="modal-checkbox checklist-select-all">
<input type="checkbox" id="manage-account-liderados-select-all" />
Marcar todos os resultados da busca
</label>
<div class="checklist-box" id="manage-account-liderados-checklist"></div>
<p class="modal-error" id="manage-account-liderados-error"></p>
</div>
<div class="modal-actions">
<button type="button" class="btn-outline" id="manage-account-close-btn">Fechar</button>
<button type="button" class="btn-solid" id="manage-account-save-btn" hidden>Salvar liderados</button>
</div>
</div>
</div>
<div class="modal-overlay" id="password-modal" hidden>
<div class="modal-card">
<h2 class="modal-card__title">Alterar senha</h2>
<div class="modal-field">
<label for="pwd-current">Senha atual</label>
<div class="password-field">
<input type="password" id="pwd-current" autocomplete="current-password" />
<button type="button" class="password-field__toggle" id="pwd-current-toggle" aria-label="Mostrar senha"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
</div>
<div class="modal-field">
<label for="pwd-new">Nova senha</label>
<div class="password-field">
<input type="password" id="pwd-new" autocomplete="new-password" />
<button type="button" class="password-field__toggle" id="pwd-new-toggle" aria-label="Mostrar senha"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
</div>
<div class="modal-field">
<label for="pwd-confirm">Confirmar nova senha</label>
<div class="password-field">
<input type="password" id="pwd-confirm" autocomplete="new-password" />
<button type="button" class="password-field__toggle" id="pwd-confirm-toggle" aria-label="Mostrar senha"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
</div>
<p class="modal-error" id="pwd-error"></p>
<div class="modal-actions">
<button type="button" class="btn-outline" id="pwd-cancel-btn">Cancelar</button>
<button type="button" class="btn-solid" id="pwd-save-btn">Salvar</button>
</div>
</div>
</div>
<div class="modal-overlay" id="notif-history-modal" hidden>
<div class="modal-card">
<h2 class="modal-card__title">Histórico de Notificações</h2>
<ul class="notif-list" id="notif-history-list"></ul>
<div class="modal-actions">
<button type="button" class="btn-outline" id="notif-history-close-btn">Fechar</button>
</div>
</div>
</div>
<div class="modal-overlay" id="calendario-depaula-modal" hidden>
<div class="modal-card iframe-modal-card">
<div class="iframe-modal-header">
<h2 class="modal-card__title">Calendário De Paula</h2>
<button type="button" class="icon-btn" id="calendario-depaula-close-btn" aria-label="Fechar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12" stroke-linecap="round"/></svg>
</button>
</div>
<iframe id="calendario-depaula-iframe" class="iframe-modal-iframe" title="Calendário De Paula"></iframe>
</div>
</div>
<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'js/profiles.js' %}"></script>
<script src="{% static 'js/auth.js' %}"></script>
<script src="{% static 'js/access.js' %}"></script>
<script src="{% static 'js/account.js' %}"></script>
<script src="{% static 'js/favorites.js' %}"></script>
<script src="{% static 'js/events.js' %}"></script>
<script src="{% static 'js/sidebar.js' %}"></script>
<script src="{% static 'js/notifications.js' %}"></script>
<script src="{% static 'js/custo-contratacao.js' %}"></script>
</body>
</html>