cpp-art-226-forms / index.html
alexandremoraisdarosa's picture
Add 2 files
f6fd21d verified
<!DOCTYPE html>
<html lang="pt-BR" class="h-full bg-gray-50">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Portaria MJSP nº 1122/2026 - Anexos e Testes de Conformidade</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.5rem;
}
.signature-line {
border-bottom: 1px solid #000;
padding: 0.25rem 0;
margin-top: 0.5rem;
width: 100%;
font-style: italic;
color: #4b5563;
}
.highlight {
background-color: #fffbeb;
border-left: 4px solid #d97706;
padding: 1rem;
margin: 1rem 0;
border-radius: 0.375rem;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #d1d5db;
padding: 0.75rem;
text-align: left;
}
th {
background-color: #f3f4f6;
font-weight: 600;
}
.yes-no {
display: flex;
justify-content: center;
gap: 1rem;
}
.yes-no input {
transform: scale(1.2);
}
.btn-export {
background: linear-gradient(to right, #10b981, #065f46);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-export:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.form-container {
background: white;
border-radius: 0.75rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
padding: 2rem;
transition: all 0.3s ease;
}
.form-container:hover {
box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
}
.tab-btn {
transition: all 0.3s ease;
}
.tab-btn:hover {
background-color: #f3f4f6;
border-bottom-color: #3b82f6;
}
.tab-btn.active {
border-bottom-color: #2563eb;
color: #1e40af;
font-weight: 600;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Header -->
<header class="text-center mb-10">
<h1 class="text-4xl font-bold text-gray-900 mb-2">PORTARIA MJSP Nº 1122/2026</h1>
<p class="text-xl text-gray-700">Anexos e Testes Práticos de Conformidade</p>
<div class="mt-6 w-full h-1 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 rounded-full"></div>
</header>
<!-- Tabs Navigation -->
<div class="flex flex-wrap border-b border-gray-300 mb-8 overflow-x-auto">
<button class="tab-btn px-8 py-4 text-sm font-medium text-center text-gray-700 hover:text-blue-600 border-b-2 border-transparent active focus:outline-none" data-tab="anexo-ii">
<i class="fas fa-user-check mr-2"></i>
Anexo II<br><span class="text-xs font-normal">Reconhecimento Presencial</span>
</button>
<button class="tab-btn px-8 py-4 text-sm font-medium text-center text-gray-700 hover:text-purple-600 border-b-2 border-transparent focus:outline-none" data-tab="anexo-iii">
<i class="fas fa-images mr-2"></i>
Anexo III<br><span class="text-xs font-normal">Reconhecimento Fotográfico</span>
</button>
<button class="tab-btn px-8 py-4 text-sm font-medium text-center text-gray-700 hover:text-green-600 border-b-2 border-transparent focus:outline-none" data-tab="anexo-iv">
<i class="fas fa-robot mr-2"></i>
Anexo IV<br><span class="text-xs font-normal">IA - Composição de Imagens</span>
</button>
<button class="tab-btn px-8 py-4 text-sm font-medium text-center text-gray-700 hover:text-yellow-600 border-b-2 border-transparent focus:outline-none" data-tab="anexo-v">
<i class="fas fa-check-square mr-2"></i>
Anexo V<br><span class="text-xs font-normal">Checklist de Avaliação</span>
</button>
<button class="tab-btn px-8 py-4 text-sm font-medium text-center text-gray-700 hover:text-red-600 border-b-2 border-transparent focus:outline-none" data-tab="testes">
<i class="fas fa-vial mr-2"></i>
Capítulo 8<br><span class="text-xs font-normal">Testes de Conformidade</span>
</button>
</div>
<!-- Tab Contents -->
<main class="space-y-8">
<!-- Anexo II -->
<section id="anexo-ii" class="tab-content active">
<div class="form-container">
<h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-user-check mr-3 text-blue-600 text-2xl"></i>
Anexo II: Formulário de Reconhecimento Presencial de Pessoa
</h2>
<p class="text-gray-700 mb-6 italic text-lg leading-relaxed">O formulário padroniza o registro formal do procedimento presencial, garantindo a documentação da cadeia de conformidade e a preservação dos direitos do investigado [Portaria MJSP nº 1122/2026, Anexo II].</p>
<form class="space-y-8" id="form-anexo-ii">
<!-- Seção I -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-600">
<h3 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i class="fas fa-clipboard-list mr-3 text-blue-600"></i>
I – REGISTRO DO PROCEDIMENTO (AUTORIDADE POLICIAL)
</h3>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Identificação Básica</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div><input type="text" name="data" placeholder="Data" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
<div><input type="text" name="hora" placeholder="Hora" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
<div><input type="text" name="local" placeholder="Local" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
</div>
<div class="mt-4"><input type="text" name="numero_inquerito" placeholder="Nº do Inquérito/Procedimento" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
<div class="mt-4"><input type="text" name="delegacia" placeholder="Delegacia/Órgão" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Autoridade responsável pelo ato</label>
<div class="space-y-3">
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="delegado" class="mr-3 h-5 w-5 text-blue-600"> Delegado de Polícia</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="investigador" class="mr-3 h-5 w-5 text-blue-600"> Oficial Investigador ou Escrivão de Polícia</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="perito" class="mr-3 h-5 w-5 text-blue-600"> Perito Criminal ou Papiloscopista</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="outro" class="mr-3 h-5 w-5 text-blue-600"> Outro: <input type="text" name="outro_autoridade" class="border border-gray-300 rounded px-3 py-1 ml-2 w-64"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Entrevista prévia realizada?</label>
<div class="flex flex-wrap items-center gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="entrevista" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim</label>
<label class="flex items-center text-lg"><input type="checkbox" name="entrevista" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não (justificar): <input type="text" name="justificativa_entrevista" class="border border-gray-300 rounded px-3 py-1 ml-2 w-80"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Itens da entrevista registrados</label>
<div class="checkbox-grid">
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="descricao" class="mr-3 h-5 w-5 text-blue-600"> Descrição livre da pessoa que cometeu o delito</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="visibilidade" class="mr-3 h-5 w-5 text-blue-600"> Condições de visibilidade no momento do fato</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="contato_imagens" class="mr-3 h-5 w-5 text-blue-600"> Declaração sobre contato prévio com imagens</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="autodeclaracao" class="mr-3 h-5 w-5 text-blue-600"> Autodeclaração racial da testemunha</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Modo de alinhamento adotado</label>
<div class="flex flex-wrap gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="modo_alinhamento" value="simultaneo" class="mr-3 h-5 w-5 text-blue-600"> Simultâneo (lado a lado)</label>
<label class="flex items-center text-lg"><input type="checkbox" name="modo_alinhamento" value="sequencial" class="mr-3 h-5 w-5 text-blue-600"> Sequencial (um por vez)</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Pessoa a ser reconhecida incluída no alinhamento?</label>
<div class="flex flex-wrap gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="pessoa_incluida" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim</label>
<label class="flex items-center text-lg"><input type="checkbox" name="pessoa_incluida" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">As pessoas do alinhamento apresentavam</label>
<div class="checkbox-grid">
<label class="flex items-center text-lg"><input type="checkbox" name="caracteristicas_alinhamento" value="tracos" class="mr-3 h-5 w-5 text-blue-600"> Traços semelhantes</label>
<label class="flex items-center text-lg"><input type="checkbox" name="caracteristicas_alinhamento" value="vestuario" class="mr-3 h-5 w-5 text-blue-600"> Vestuário semelhante</label>
<label class="flex items-center text-lg"><input type="checkbox" name="caracteristicas_alinhamento" value="idade" class="mr-3 h-5 w-5 text-blue-600"> Idade aproximada</label>
<label class="flex items-center text-lg"><input type="checkbox" name="caracteristicas_alinhamento" value="etnia" class="mr-3 h-5 w-5 text-blue-600"> Etnia compatível</label>
<label class="flex items-center text-lg"><input type="checkbox" name="caracteristicas_alinhamento" value="estatura" class="mr-3 h-5 w-5 text-blue-600"> Estatura equivalente</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">*Show-up* (apresentação isolada) foi realizado?</label>
<div class="flex flex-wrap items-center gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="showup" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não</label>
<label class="flex items-center text-lg"><input type="checkbox" name="showup" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim (justificar motivo excepcional): <input type="text" name="justificativa_showup" class="border border-gray-300 rounded px-3 py-1 ml-2 w-80"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Álbuns policiais e/ou criminais foram apresentados?</label>
<div class="flex flex-wrap items-center gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="albuns" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não</label>
<label class="flex items-center text-lg"><input type="checkbox" name="albuns" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim (justificar motivo excepcional): <input type="text" name="justificativa_albuns" class="border border-gray-300 rounded px-3 py-1 ml-2 w-80"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Procedimento gravado por vídeo?</label>
<div class="flex flex-wrap items-center gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="gravado_video" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim</label>
<label class="flex items-center text-lg"><input type="checkbox" name="gravado_video" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não (justificar): <input type="text" name="justificativa_video" class="border border-gray-300 rounded px-3 py-1 ml-2 w-80"/></label>
</div>
</div>
</div>
<!-- Seção II -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-600">
<h3 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i class="fas fa-user mr-3 text-blue-600"></i>
II – DECLARAÇÕES DA TESTEMUNHA OU VÍTIMA
</h3>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Dados Pessoais</label>
<div><input type="text" name="nome_testemunha" placeholder="Nome completo" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition mb-4"/></div>
<div class="flex flex-wrap gap-6 mb-4">
<label class="flex items-center text-lg"><input type="checkbox" name="sexo" value="masculino" class="mr-3 h-5 w-5 text-blue-600"> Masculino</label>
<label class="flex items-center text-lg"><input type="checkbox" name="sexo" value="feminino" class="mr-3 h-5 w-5 text-blue-600"> Feminino</label>
<label class="flex items-center text-lg"><input type="checkbox" name="sexo" value="outro" class="mr-3 h-5 w-5 text-blue-600"> Outro</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div><input type="text" name="data_nascimento" placeholder="Data de nascimento" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
<div><input type="text" name="documento_identificacao" placeholder="Documento de identificação" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Foi instruída de que</label>
<div class="checkbox-grid">
<label class="flex items-center text-lg"><input type="checkbox" name="instrucoes" value="pode_nao_estar" class="mr-3 h-5 w-5 text-blue-600"> A pessoa que cometeu o delito pode ou não estar no alinhamento</label>
<label class="flex items-center text-lg"><input type="checkbox" name="instrucoes" value="sem_obrigacao" class="mr-3 h-5 w-5 text-blue-600"> Não há obrigação de reconhecer ninguém</label>
<label class="flex items-center text-lg"><input type="checkbox" name="instrucoes" value="opcional" class="mr-3 h-5 w-5 text-blue-600"> O reconhecimento é opcional</label>
<label class="flex items-center text-lg"><input type="checkbox" name="instrucoes" value="grau_certeza" class="mr-3 h-5 w-5 text-blue-600"> O grau de certeza será solicitado e registrado</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Resultado do reconhecimento</label>
<div class="space-y-3">
<label class="flex items-center text-lg"><input type="checkbox" name="resultado" value="absoluta_certeza" class="mr-3 h-5 w-5 text-blue-600"> Reconheceu com absoluta certeza a pessoa apresentada como sendo a mesma observada no momento do crime</label>
<label class="flex items-center text-lg"><input type="checkbox" name="resultado" value="com_duvida" class="mr-3 h-5 w-5 text-blue-600"> Reconheceu com dúvida se a pessoa apresentada é a mesma observada no momento do crime</label>
<label class="flex items-center text-lg"><input type="checkbox" name="resultado" value="nao_reconheceu" class="mr-3 h-5 w-5 text-blue-600"> Não reconheceu nenhuma das pessoas apresentadas</label>
<label class="flex items-center text-lg"><input type="checkbox" name="resultado" value="parcialmente" class="mr-3 h-5 w-5 text-blue-600"> Reconheceu parcialmente algumas características, mas não foi possível afirmar se é a mesma pessoa observada no momento do crime</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Posição da pessoa reconhecida no alinhamento</label>
<div class="flex flex-wrap gap-6">
<label class="flex items-center text-lg"><input type="checkbox" name="posicao" value="1" class="mr-2 h-5 w-5 text-blue-600"> 1</label>
<label class="flex items-center text-lg"><input type="checkbox" name="posicao" value="2" class="mr-2 h-5 w-5 text-blue-600"> 2</label>
<label class="flex items-center text-lg"><input type="checkbox" name="posicao" value="3" class="mr-2 h-5 w-5 text-blue-600"> 3</label>
<label class="flex items-center text-lg"><input type="checkbox" name="posicao" value="4" class="mr-2 h-5 w-5 text-blue-600"> 4</label>
<label class="flex items-center text-lg"><input type="checkbox" name="posicao" value="5" class="mr-2 h-5 w-5 text-blue-600"> 5</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Acompanhamento de defensor ou advogado?</label>
<div class="flex flex-wrap gap-8 mb-4">
<label class="flex items-center text-lg"><input type="checkbox" name="acompanhamento" value="sim" class="mr-3 h-5 w-5 text-blue-600"> Sim</label>
<label class="flex items-center text-lg"><input type="checkbox" name="acompanhamento" value="nao" class="mr-3 h-5 w-5 text-blue-600"> Não</label>
</div>
<div><input type="text" name="nome_oab" placeholder="Nome e OAB (se aplicável)" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"/></div>
</div>
</div>
<!-- Assinaturas -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-600">
<h3 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i class="fas fa-signature mr-3 text-blue-600"></i>
ASSINATURAS
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label class="block text-lg font-medium text-gray-700 mb-1">Autoridade Policial</label>
<div class="signature-line text-center">Assinatura</div>
</div>
<div>
<label class="block text-lg font-medium text-gray-700 mb-1">Servidor Responsável / Oficial Investigador ou Escrivão de Polícia</label>
<div class="signature-line text-center">Assinatura</div>
</div>
</div>
</div>
<div class="text-right pt-6">
<button type="button" class="btn-export save-form" data-form="anexo-ii">
<i class="fas fa-save mr-2"></i>Salvar e Exportar PDF
</button>
</div>
</form>
</div>
</section>
<!-- Anexo III -->
<section id="anexo-iii" class="tab-content">
<div class="form-container">
<h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-images mr-3 text-purple-600 text-2xl"></i>
Anexo III: Formulário de Reconhecimento Fotográfico de Pessoa
</h2>
<p class="text-gray-700 mb-6 italic text-lg leading-relaxed">O formulário estrutura a condução do reconhecimento mediante imagens, exigindo o controle sobre o uso subsidiário do recurso visual e a aplicação eventual de ferramentas algorítmicas [Portaria MJSP nº 1122/2026, Anexo III].</p>
<form class="space-y-8" id="form-anexo-iii">
<!-- Seção I -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-purple-600">
<h3 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i class="fas fa-clipboard-list mr-3 text-purple-600"></i>
I – REGISTRO DO PROCEDIMENTO (AUTORIDADE POLICIAL)
</h3>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Identificação Básica</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div><input type="text" name="data" placeholder="Data" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition"/></div>
<div><input type="text" name="hora" placeholder="Hora" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition"/></div>
<div><input type="text" name="local" placeholder="Local" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition"/></div>
</div>
<div class="mt-4"><input type="text" name="numero_inquerito" placeholder="Nº do Inquérito/Procedimento" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition"/></div>
<div class="mt-4"><input type="text" name="delegacia" placeholder="Delegacia/Órgão" class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 text-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition"/></div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Autoridade responsável pelo ato</label>
<div class="space-y-3">
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="delegado" class="mr-3 h-5 w-5 text-purple-600"> Delegado de Polícia</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="investigador" class="mr-3 h-5 w-5 text-purple-600"> Oficial Investigador ou Escrivão de Polícia</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="perito" class="mr-3 h-5 w-5 text-purple-600"> Perito Criminal ou Papiloscopista</label>
<label class="flex items-center text-lg"><input type="checkbox" name="autoridade" value="outro" class="mr-3 h-5 w-5 text-purple-600"> Outro: <input type="text" name="outro_autoridade" class="border border-gray-300 rounded px-3 py-1 ml-2 w-64"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Entrevista prévia realizada?</label>
<div class="flex flex-wrap items-center gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="entrevista" value="sim" class="mr-3 h-5 w-5 text-purple-600"> Sim</label>
<label class="flex items-center text-lg"><input type="checkbox" name="entrevista" value="nao" class="mr-3 h-5 w-5 text-purple-600"> Não (justificar): <input type="text" name="justificativa_entrevista" class="border border-gray-300 rounded px-3 py-1 ml-2 w-80"/></label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Itens da entrevista registrados</label>
<div class="checkbox-grid">
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="descricao" class="mr-3 h-5 w-5 text-purple-600"> Descrição livre da pessoas que cometeu o delito</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="visibilidade" class="mr-3 h-5 w-5 text-purple-600"> Condições de visibilidade no momento do fato</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="contato_imagens" class="mr-3 h-5 w-5 text-purple-600"> Declaração sobre contato prévio com imagens</label>
<label class="flex items-center text-lg"><input type="checkbox" name="itens_entrevista" value="autodeclaracao" class="mr-3 h-5 w-5 text-purple-600"> Autodeclaração racial da testemunha</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Modo de alinhamento adotado</label>
<div class="flex flex-wrap gap-8">
<label class="flex items-center text-lg"><input type="checkbox" name="modo_alinhamento" value="simultaneo" class="mr-3 h-5 w-5 text-purple-600"> Simultâneo (conjunto exibido)</label>
<label class="flex items-center text-lg"><input type="checkbox" name="modo_alinhamento" value="sequencial" class="mr-3 h-5 w-5 text-purple-600"> Sequencial (uma por vez)</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3 text-lg">Detalhes da exibição</label>
<div class="flex flex-wrap items-center gap-6">
<div class="flex items-center">
<span class="text-lg">Nº total de imagens exibidas:</span>
<input type="number" name="total_imagens" class="border-2 border-gray-300 rounded-lg px-3 py-2 ml-2 w-24 text-lg"/>
</div>
<div class="flex items-center">
<span
</html>