Path: C:\
<!DOCTYPE html>
<html lang="pt-BR" class="h-full bg-slate-900 text-slate-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lançador de Salários - SIIMP TMS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
if (window.pdfjsLib) {
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body { font-family: 'Inter', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #1e293b; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
</style>
</head>
<body class="h-full flex flex-col justify-between overflow-x-hidden antialiased selection:bg-indigo-500 selection:text-white">
<!-- ==================== TELA DE AUTENTICAÇÃO / LOGIN ==================== -->
<div id="authScreen" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 backdrop-blur-md p-4 transition-all duration-300">
<div class="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl p-8 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 mb-4 shadow-inner">
<i class="fa-solid fa-shield-halved text-2xl"></i>
</div>
<h1 class="text-2xl font-bold text-white tracking-tight">Lançador de Salários</h1>
<p class="text-xs text-slate-400 mt-1">SIIMP TMS • Proteção de Credenciais e Acesso Seguro</p>
</div>
<form id="loginForm" class="space-y-5" onsubmit="event.preventDefault(); handleLogin();">
<div>
<label class="block text-xs font-semibold text-slate-300 mb-2 uppercase tracking-wider">Senha Mestra de Acesso</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-500">
<i class="fa-solid fa-lock"></i>
</span>
<input type="password" id="authPassword" required placeholder="Digite sua senha de acesso..." class="w-full pl-10 pr-10 py-3 bg-slate-800/80 border border-slate-700 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition shadow-inner">
<button type="button" onclick="togglePasswordVisibility('authPassword')" class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-slate-500 hover:text-slate-300">
<i class="fa-regular fa-eye" id="eyeIconauthPassword"></i>
</button>
</div>
<p id="loginError" class="text-xs text-rose-400 mt-2 hidden flex items-center gap-1.5 font-medium">
<i class="fa-solid fa-circle-exclamation"></i> <span>Senha incorreta. Tente novamente.</span>
</p>
</div>
<button type="submit" id="btnLogin" class="w-full py-3.5 px-4 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-500 hover:to-indigo-600 text-white font-semibold rounded-xl text-sm transition duration-200 shadow-lg shadow-indigo-600/30 flex items-center justify-center gap-2">
<span>Acessar Aplicação</span>
<i class="fa-solid fa-arrow-right text-xs"></i>
</button>
</form>
<div class="mt-6 pt-6 border-t border-slate-800/60 text-center">
<p class="text-[11px] text-slate-500 flex items-center justify-center gap-1.5">
<i class="fa-solid fa-circle-info text-slate-600"></i>
Senha padrão inicial: <code class="bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded text-[10px]">siimp2026</code>
</p>
</div>
</div>
</div>
<!-- ==================== APLICAÇÃO PRINCIPAL ==================== -->
<div id="mainApp" class="flex-1 flex flex-col min-h-screen">
<!-- NAVBAR -->
<header class="bg-slate-900/80 backdrop-blur-md border-b border-slate-800 sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-600/20">
<i class="fa-solid fa-money-bill-transfer text-lg"></i>
</div>
<div>
<h1 class="text-base font-bold text-white flex items-center gap-2">
Lançamento de Salários
<span class="text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">SIIMP TMS</span>
</h1>
<p class="text-xs text-slate-400">Automação de Folha de Pagamento & Controle Contábil</p>
</div>
</div>
<div class="flex items-center gap-3">
<!-- SIIMP Status Badge -->
<div id="siimpStatusBadge" class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 border border-slate-700 text-slate-300">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span id="siimpStatusText">SIIMP Conectado</span>
</div>
<!-- Settings Button -->
<button onclick="openSettingsModal()" title="Configurações e Senha" class="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg border border-slate-800 transition">
<i class="fa-solid fa-gear"></i>
</button>
<!-- Logout Button -->
<button onclick="handleLogout()" title="Bloquear / Sair" class="p-2 text-slate-400 hover:text-rose-400 hover:bg-slate-800 rounded-lg border border-slate-800 transition">
<i class="fa-solid fa-right-from-bracket"></i>
</button>
</div>
</div>
</header>
<!-- CONTEÚDO PRINCIPAL -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full space-y-6">
<!-- TOP GRID: PARÂMETROS E EXCLUSÕES -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- CARD 1: PARÂMETROS DO LOTE (7 COLS) -->
<div class="lg:col-span-7 bg-slate-800/60 border border-slate-700/60 rounded-2xl p-6 shadow-xl relative overflow-hidden flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-5">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-lg bg-indigo-500/10 text-indigo-400 flex items-center justify-center text-sm border border-indigo-500/20">
<i class="fa-solid fa-sliders"></i>
</div>
<h2 class="text-sm font-bold text-white uppercase tracking-wider">Parâmetros do Lote</h2>
</div>
<span class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 font-medium">
<i class="fa-solid fa-credit-card text-[10px] text-indigo-400"></i> Forma: <strong>Crédito em Conta (9)</strong>
</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
<!-- Data de Vencimento (5 cols) -->
<div class="sm:col-span-5">
<label class="block text-xs font-semibold text-slate-300 mb-1.5 flex items-center gap-1.5">
<i class="fa-regular fa-calendar-check text-indigo-400"></i> Data de Vencimento
</label>
<input type="date" id="paramMaturity" class="w-full px-3.5 py-2.5 bg-slate-900/90 border border-slate-700 rounded-xl text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition shadow-inner">
</div>
<!-- Observação / Comentário (7 cols) -->
<div class="sm:col-span-7">
<label class="block text-xs font-semibold text-slate-300 mb-1.5 flex items-center justify-between">
<span class="flex items-center gap-1.5">
<i class="fa-regular fa-comment-dots text-indigo-400"></i> Observação do Lançamento
</span>
</label>
<input type="text" id="paramObs" placeholder="Ex: Pagamento Salário Ref. 08/2026" class="w-full px-3.5 py-2.5 bg-slate-900/90 border border-slate-700 rounded-xl text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition shadow-inner">
</div>
</div>
</div>
<div class="mt-4 pt-3 border-t border-slate-700/60 text-[11px] text-slate-400 flex items-center gap-2">
<i class="fa-solid fa-check-circle text-emerald-400"></i>
<span>A forma de pagamento padrão <strong>Crédito em Conta</strong> é aplicada automaticamente em todos os títulos.</span>
</div>
</div>
<!-- CARD 2: LISTA DE EXCLUSÕES (5 COLS) -->
<div class="lg:col-span-5 bg-slate-800/60 border border-slate-700/60 rounded-2xl p-6 shadow-xl flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-lg bg-amber-500/10 text-amber-400 flex items-center justify-center text-sm border border-amber-500/20">
<i class="fa-solid fa-user-slash"></i>
</div>
<h2 class="text-sm font-bold text-white uppercase tracking-wider">Lista de Exclusões</h2>
</div>
<span class="text-[11px] px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20 font-medium" id="exclusionsBadgeCount">1 Ativo</span>
</div>
<p class="text-xs text-slate-400 mb-3">Colaboradores abaixo serão desconsiderados e não terão título gerado no SIIMP:</p>
<!-- Badges de Exclusão -->
<div id="exclusionsContainer" class="flex flex-wrap gap-2 max-h-24 overflow-y-auto custom-scrollbar p-1 mb-4">
<!-- Renderizado via JS -->
</div>
</div>
<!-- Input para adicionar nova exclusão -->
<div class="pt-3 border-t border-slate-700/60">
<div class="flex gap-2">
<input type="text" id="newExclusionInput" placeholder="Nome ou CPF a desconsiderar..." class="flex-1 px-3 py-1.5 bg-slate-900/90 border border-slate-700 rounded-lg text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-amber-500">
<button onclick="addExclusion()" class="px-3 py-1.5 bg-amber-600 hover:bg-amber-500 text-white rounded-lg text-xs font-semibold transition flex items-center gap-1">
<i class="fa-solid fa-plus"></i> Inserir
</button>
</div>
</div>
</div>
</div>
<!-- CARD 3: ÁREA DE UPLOAD / DRAG & DROP -->
<div class="bg-slate-800/40 border border-slate-700/60 rounded-2xl p-6 shadow-xl">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-lg bg-emerald-500/10 text-emerald-400 flex items-center justify-center text-sm border border-emerald-500/20">
<i class="fa-solid fa-file-pdf"></i>
</div>
<h2 class="text-sm font-bold text-white uppercase tracking-wider">Relações de Salário em PDF (Alterdata)</h2>
</div>
<button onclick="document.getElementById('pdfFileInput').click()" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1.5 bg-indigo-500/10 border border-indigo-500/20 px-3 py-1.5 rounded-lg transition">
<i class="fa-solid fa-folder-open"></i> Selecionar Arquivos
</button>
</div>
<input type="file" id="pdfFileInput" multiple accept=".pdf" class="hidden" onchange="handleFileSelect(event)">
<div id="dropZone" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)" onclick="document.getElementById('pdfFileInput').click()" class="border-2 border-dashed border-slate-700 hover:border-indigo-500/60 bg-slate-900/40 hover:bg-indigo-950/10 rounded-2xl p-8 text-center cursor-pointer transition duration-200">
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-800 text-slate-400 mb-3 group-hover:scale-110 transition">
<i class="fa-solid fa-cloud-arrow-up text-2xl"></i>
</div>
<h3 class="text-sm font-semibold text-white">Arraste os arquivos PDF de salário aqui</h3>
<p class="text-xs text-slate-400 mt-1">Suporta múltiplos PDFs das empresas WAR e RAW</p>
</div>
<!-- Lista de Arquivos Carregados -->
<div id="loadedFilesList" class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 hidden">
<!-- Renderizado via JS -->
</div>
</div>
<!-- CARD 4: RESUMO POR EMPRESA E CONFERÊNCIA -->
<div id="summarySection" class="hidden space-y-6">
<!-- Totais em Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-slate-800/80 border border-slate-700 rounded-xl p-4">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total nos PDFs</span>
<div class="text-xl font-bold text-white mt-1" id="statTotalPdf">R$ 0,00</div>
<span class="text-[11px] text-slate-500" id="statTotalPdfCount">0 colaboradores</span>
</div>
<div class="bg-slate-800/80 border border-indigo-500/30 bg-gradient-to-b from-indigo-950/20 to-transparent rounded-xl p-4">
<span class="text-xs font-semibold text-indigo-400 uppercase tracking-wider">Total a Lançar (Válidos)</span>
<div class="text-xl font-bold text-indigo-300 mt-1" id="statTotalToLaunch">R$ 0,00</div>
<span class="text-[11px] text-indigo-400/80" id="statTotalToLaunchCount">0 títulos no SIIMP</span>
</div>
<div class="bg-slate-800/80 border border-amber-500/30 bg-gradient-to-b from-amber-950/20 to-transparent rounded-xl p-4">
<span class="text-xs font-semibold text-amber-400 uppercase tracking-wider">Desconsiderados / Excluídos</span>
<div class="text-xl font-bold text-amber-300 mt-1" id="statTotalExcluded">R$ 0,00</div>
<span class="text-[11px] text-amber-400/80" id="statTotalExcludedCount">0 colaboradores</span>
</div>
<div class="bg-slate-800/80 border border-emerald-500/30 bg-gradient-to-b from-emerald-950/20 to-transparent rounded-xl p-4">
<span class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Status Cadastral SIIMP</span>
<div class="text-xl font-bold text-emerald-300 mt-1" id="statMatchedStatus">100%</div>
<span class="text-[11px] text-emerald-400/80" id="statMatchedSubtext">Todos validados</span>
</div>
</div>
<!-- Tabela por Filial -->
<div class="bg-slate-800/60 border border-slate-700/60 rounded-2xl p-6 shadow-xl">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
<i class="fa-solid fa-building text-indigo-400"></i> Conferência de Valores por Empresa / Filial
</h3>
</div>
<div class="overflow-x-auto custom-scrollbar">
<table class="w-full text-left border-collapse text-xs">
<thead>
<tr class="border-b border-slate-700 text-slate-400 uppercase tracking-wider">
<th class="py-3 px-3">Empresa / Filial</th>
<th class="py-3 px-3">ID SIIMP</th>
<th class="py-3 px-3">Carteira</th>
<th class="py-3 px-3 text-right">Qtd. PDF</th>
<th class="py-3 px-3 text-right">Total PDF</th>
<th class="py-3 px-3 text-right">Excluídos</th>
<th class="py-3 px-3 text-right font-bold text-indigo-400">A Lançar</th>
</tr>
</thead>
<tbody id="companySummaryTableBody" class="divide-y divide-slate-800 text-slate-200">
<!-- Renderizado via JS -->
</tbody>
</table>
</div>
</div>
<!-- AÇÃO DE LANÇAMENTO & LOGS EM TEMPO REAL -->
<div class="bg-slate-800/60 border border-slate-700/60 rounded-2xl p-6 shadow-xl space-y-5">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div>
<h3 class="text-base font-bold text-white">Pronto para lançar no SIIMP</h3>
<p class="text-xs text-slate-400">Os títulos serão gerados com vencimento <strong id="lblVencimentoPreview" class="text-indigo-400">--/--/----</strong>, forma <strong class="text-indigo-400">Crédito em Conta</strong> e observação <strong id="lblObsPreview" class="text-indigo-400">---</strong>.</p>
</div>
<div class="flex items-center gap-3 w-full sm:w-auto">
<button onclick="togglePreviewTable()" class="px-4 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-xl text-xs font-semibold transition flex items-center gap-2">
<i class="fa-solid fa-table-list"></i> Ver Lista Completa
</button>
<button id="btnExecuteLaunch" onclick="executeBatchLaunch()" class="flex-1 sm:flex-initial px-6 py-3.5 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white rounded-xl text-sm font-bold transition duration-200 shadow-lg shadow-emerald-600/30 flex items-center justify-center gap-2">
<i class="fa-solid fa-bolt"></i> Iniciar Lançamentos no SIIMP
</button>
</div>
</div>
<!-- Barra de Progresso -->
<div id="progressContainer" class="space-y-2 hidden">
<div class="flex items-center justify-between text-xs font-semibold">
<span id="progressStatusText" class="text-indigo-400 flex items-center gap-2">
<i class="fa-solid fa-spinner fa-spin"></i> Processando lançamentos...
</span>
<span id="progressCountText" class="text-slate-300">0 / 0</span>
</div>
<div class="w-full h-3 bg-slate-900 rounded-full overflow-hidden p-0.5 border border-slate-700">
<div id="progressBar" class="h-full bg-gradient-to-r from-indigo-500 to-emerald-500 rounded-full transition-all duration-200 w-0"></div>
</div>
</div>
<!-- Live Log Console -->
<div id="consoleLogContainer" class="hidden">
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-slate-300 max-h-60 overflow-y-auto custom-scrollbar space-y-1" id="consoleLog">
<!-- Logs adicionados via JS -->
</div>
</div>
<!-- Botões de Exportação pós-execução -->
<div id="exportButtonsContainer" class="hidden flex items-center justify-end gap-3 pt-2">
<button onclick="exportReport('csv')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-xs font-semibold transition flex items-center gap-2">
<i class="fa-solid fa-file-csv text-emerald-400"></i> Exportar CSV
</button>
<button onclick="exportReport('json')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-xs font-semibold transition flex items-center gap-2">
<i class="fa-solid fa-file-code text-indigo-400"></i> Exportar JSON
</button>
</div>
</div>
<!-- TABELA DETALHADA DE COLABORADORES (EXPANSÍVEL) -->
<div id="detailedTableSection" class="hidden bg-slate-800/60 border border-slate-700/60 rounded-2xl p-6 shadow-xl space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-sm font-bold text-white uppercase tracking-wider">Lista Individual de Colaboradores</h3>
<input type="text" id="tableSearchInput" oninput="filterEmployeeTable()" placeholder="Filtrar por nome ou CPF..." class="px-3 py-1.5 bg-slate-900 border border-slate-700 rounded-lg text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64">
</div>
<div class="overflow-x-auto max-h-96 custom-scrollbar">
<table class="w-full text-left border-collapse text-xs">
<thead class="sticky top-0 bg-slate-800 z-10 border-b border-slate-700 text-slate-400 uppercase tracking-wider">
<tr>
<th class="py-2.5 px-3">Cód.</th>
<th class="py-2.5 px-3">Colaborador</th>
<th class="py-2.5 px-3">CPF</th>
<th class="py-2.5 px-3">Empresa</th>
<th class="py-2.5 px-3 text-right">Líquido (R$)</th>
<th class="py-2.5 px-3 text-center">Status / Ação</th>
</tr>
</thead>
<tbody id="employeeTableBody" class="divide-y divide-slate-800 text-slate-200">
<!-- Renderizado via JS -->
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- FOOTER -->
<footer class="bg-slate-900 border-t border-slate-800 py-4 px-6 text-center text-xs text-slate-500">
Lançador Autônomo de Folha • SIIMP TMS • Desenvolvido para Trans War & Trans Raw Transportes
</footer>
</div>
<!-- ==================== MODAL DE CONFIGURAÇÕES E SENHA ==================== -->
<div id="settingsModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4 hidden">
<div class="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl p-6 relative">
<div class="flex items-center justify-between pb-4 border-b border-slate-800 mb-5">
<h3 class="text-base font-bold text-white flex items-center gap-2">
<i class="fa-solid fa-shield-keyhole text-indigo-400"></i> Segurança & Senha Mestra
</h3>
<button onclick="closeSettingsModal()" class="text-slate-500 hover:text-white text-lg">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<form id="changePasswordForm" class="space-y-4" onsubmit="event.preventDefault(); handleChangePassword();">
<div>
<label class="block text-xs font-semibold text-slate-300 mb-1">Senha Atual</label>
<input type="password" id="currentPassword" required class="w-full px-3.5 py-2 bg-slate-800 border border-slate-700 rounded-xl text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-xs font-semibold text-slate-300 mb-1">Nova Senha Mestra</label>
<input type="password" id="newPassword" required minlength="4" class="w-full px-3.5 py-2 bg-slate-800 border border-slate-700 rounded-xl text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-xs font-semibold text-slate-300 mb-1">Confirmar Nova Senha</label>
<input type="password" id="confirmNewPassword" required minlength="4" class="w-full px-3.5 py-2 bg-slate-800 border border-slate-700 rounded-xl text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<p id="changePasswordError" class="text-xs text-rose-400 hidden"></p>
<p id="changePasswordSuccess" class="text-xs text-emerald-400 hidden flex items-center gap-1">
<i class="fa-solid fa-check"></i> Senha alterada com sucesso!
</p>
<div class="pt-3 flex gap-3">
<button type="button" onclick="closeSettingsModal()" class="flex-1 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs font-semibold transition">Cancelar</button>
<button type="submit" class="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-xs font-semibold transition">Salvar Nova Senha</button>
</div>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>