# Templates e Exemplos — Portal de Transparência PNTP 2026

## 1. Template de Declaração de Inexistência

### 1.1 Formato Padrão

```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> [tipo de ocorrência] 
    <strong>no período de</strong> [data inicial] <strong>a</strong> [data final].
    <br>
    <small>Atualizado em: [data]</small>
  </p>
</div>
```

### 1.2 Exemplos por Dimensão

#### Licitações
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> licitações realizadas 
    <strong>no período de</strong> janeiro de 2025 <strong>a</strong> dezembro de 2025.
    <br>
    <small>Atualizado em: 31/01/2026</small>
  </p>
</div>
```

#### Obras Paralisadas
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> ocorrência de obras paralisadas 
    <strong>no período de</strong> janeiro de 2025 <strong>a</strong> dezembro de 2025.
    <br>
    <small>Atualizado em: 31/01/2026</small>
  </p>
</div>
```

#### Licitantes Sancionados
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> licitantes ou contratados sancionados administrativamente 
    <strong>no período de</strong> março de 2022 <strong>a</strong> fevereiro de 2026.
    <br>
    <small>Atualizado em: 30/03/2026</small>
  </p>
</div>
```

#### Concursos Públicos
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> realização de concursos públicos 
    <strong>nos últimos</strong> 8 anos. O último certame foi realizado em 2015.
    <br>
    <small>Informação atualizada até a data de 15/01/2026.</small>
  </p>
</div>
```

#### Diárias
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> pagamento de diárias 
    <strong>no período de</strong> janeiro de 2025 <strong>a</strong> dezembro de 2025.
    <br>
    <small>Atualizado em: 31/01/2026</small>
  </p>
</div>
```

#### Estagiários
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> contratação de estagiários 
    <strong>nos exercícios de</strong> 2023, 2024 e 2025.
    <br>
    <small>Atualizado em: 31/01/2026</small>
  </p>
</div>
```

#### Informações Desclassificadas
```html
<div class="declaracao-inexistencia" role="alert">
  <p>
    ℹ️ <strong>Informa-se que não houve</strong> informações desclassificadas 
    <strong>nos últimos</strong> 12 meses.
    <br>
    <small>Atualizado em: 31/01/2026</small>
  </p>
</div>
```

---

## 2. Template de Tabela de Dados

### 2.1 Estrutura HTML Padrão

```html
<div class="data-table-container" data-criterio="X.X">
  <div class="table-header">
    <h2>[Título da Tabela]</h2>
    <div class="table-meta">
      <span class="atualizado-em">Atualizado em: DD/MM/AAAA</span>
      <div class="export-buttons">
        <button data-format="xlsx" class="btn-export">
          <span>📊</span> XLSX
        </button>
        <button data-format="csv" class="btn-export">
          <span>📄</span> CSV
        </button>
        <button data-format="pdf" class="btn-export">
          <span>📕</span> PDF
        </button>
      </div>
    </div>
  </div>
  
  <div class="filters">
    <!-- Filtros específicos por dimensão -->
  </div>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>[Cabeçalho 1]</th>
        <th>[Cabeçalho 2]</th>
        <!-- ... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>[Dado 1]</td>
        <td>[Dado 2]</td>
        <!-- ... -->
      </tr>
    </tbody>
  </table>
  
  <div class="declaracao-inexistencia" hidden>
    <!-- Declaração quando não há dados -->
  </div>
</div>
```

### 2.2 Exemplo: Receita (Critério 3.1)

```html
<div class="data-table-container" data-criterio="3.1">
  <div class="table-header">
    <h2>Receita: Previsão e Realização</h2>
    <div class="table-meta">
      <span class="atualizado-em">Atualizado em: 15/01/2026</span>
      <div class="export-buttons">
        <button data-format="xlsx">XLSX</button>
        <button data-format="csv">CSV</button>
      </div>
    </div>
  </div>
  
  <div class="filters">
    <select name="ano">
      <option value="">Todos os anos</option>
      <option value="2025">2025</option>
      <option value="2024">2024</option>
      <option value="2023">2023</option>
    </select>
    <select name="mes">
      <option value="">Todos os meses</option>
      <option value="1">Janeiro</option>
      <option value="2">Fevereiro</option>
      <!-- ... -->
    </select>
  </div>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Período</th>
        <th>Receita Prevista</th>
        <th>Receita Realizada</th>
        <th>% Realizado</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Janeiro/2025</td>
        <td>R$ 10.000.000,00</td>
        <td>R$ 9.500.000,00</td>
        <td>95%</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>
```

### 2.3 Exemplo: Empenhos (Critério 4.3)

```html
<div class="data-table-container" data-criterio="4.3">
  <div class="table-header">
    <h2>Detalhamento de Empenhos</h2>
    <div class="table-meta">
      <span class="atualizado-em">Atualizado em: 15/01/2026</span>
      <div class="export-buttons">
        <button data-format="xlsx">XLSX</button>
        <button data-format="csv">CSV</button>
      </div>
    </div>
  </div>
  
  <div class="filters">
    <input type="text" name="empenho" placeholder="Número do empenho">
    <input type="text" name="credor" placeholder="Nome ou CPF/CNPJ do credor">
    <select name="mes">
      <option value="">Todos os meses</option>
      <!-- ... -->
    </select>
    <select name="ano">
      <option value="">Todos os anos</option>
      <!-- ... -->
    </select>
  </div>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Nº Empenho</th>
        <th>Beneficiário</th>
        <th>CPF/CNPJ</th>
        <th>Valor</th>
        <th>Objeto</th>
        <th>Licitação</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001/2025</td>
        <td>Empresa XYZ Ltda</td>
        <td>12.345.678/0001-90</td>
        <td>R$ 50.000,00</td>
        <td>Material de escritório</td>
        <td>Pregão Eletrônico nº 10/2025</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>
```

### 2.4 Exemplo: Servidores (Critério 6.1)

```html
<div class="data-table-container" data-criterio="6.1">
  <div class="table-header">
    <h2>Relação de Servidores</h2>
    <div class="table-meta">
      <span class="atualizado-em">Atualizado em: 15/01/2026</span>
      <div class="export-buttons">
        <button data-format="xlsx">XLSX</button>
        <button data-format="csv">CSV</button>
      </div>
    </div>
  </div>
  
  <div class="filters">
    <input type="text" name="nome" placeholder="Buscar por nome">
  </div>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Cargo/Função</th>
        <th>Lotação</th>
        <th>Data de Admissão</th>
        <th>Data de Exoneração</th>
        <th>Carga Horária</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>João da Silva</td>
        <td>Analista Administrativo</td>
        <td>Secretaria de Administração</td>
        <td>15/03/2010</td>
        <td>—</td>
        <td>40h</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>
```

---

## 3. Template de Breadcrumb

```html
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Início</a></li>
    <li><a href="/transparencia">Transparência</a></li>
    <li><a href="/transparencia/receita">Receita</a></li>
    <li aria-current="page">Previsão e Realização</li>
  </ol>
</nav>
```

---

## 4. Template de Filtros

### 4.1 Filtros por Ano e Mês

```html
<div class="filters">
  <select name="ano" aria-label="Filtrar por ano">
    <option value="">Todos os anos</option>
    <option value="2025">2025</option>
    <option value="2024">2024</option>
    <option value="2023">2023</option>
  </select>
  <select name="mes" aria-label="Filtrar por mês">
    <option value="">Todos os meses</option>
    <option value="1">Janeiro</option>
    <option value="2">Fevereiro</option>
    <!-- ... -->
  </select>
</div>
```

### 4.2 Filtros por Nome

```html
<div class="filters">
  <input type="text" 
         name="nome" 
         placeholder="Buscar por nome..."
         aria-label="Buscar por nome">
</div>
```

### 4.3 Filtros por Situação (Licitações)

```html
<div class="filters">
  <select name="situacao" aria-label="Filtrar por situação">
    <option value="">Todas as situações</option>
    <option value="aberto">Aberto</option>
    <option value="em_andamento">Em andamento</option>
    <option value="encerrado">Encerrado</option>
    <option value="homologado">Homologado</option>
    <option value="revogada">Revogada</option>
    <option value="fracassada">Fracassada</option>
  </select>
  <select name="modalidade" aria-label="Filtrar por modalidade">
    <option value="">Todas as modalidades</option>
    <option value="pregao_eletronico">Pregão Eletrônico</option>
    <option value="tomada_de_precos">Tomada de Preços</option>
    <!-- ... -->
  </select>
</div>
```

---

## 5. Template de Formulário e-SIC

```html
<form class="form-esic" action="/api/sic/pedidos" method="POST">
  <h2>Pedido de Acesso à Informação</h2>
  
  <div class="form-group">
    <label for="nome">Nome completo *</label>
    <input type="text" id="nome" name="nome" required>
  </div>
  
  <div class="form-group">
    <label for="email">E-mail *</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="telefone">Telefone</label>
    <input type="tel" id="telefone" name="telefone">
  </div>
  
  <div class="form-group">
    <label for="pedido">Descreva sua solicitação *</label>
    <textarea id="pedido" name="pedido" rows="5" required></textarea>
  </div>
  
  <div class="form-info">
    <p>
      <strong>Importante:</strong> Não é necessário informar o motivo do pedido.
      Não são exigidos documentos, assinatura reconhecida ou declaração de responsabilidade.
    </p>
  </div>
  
  <button type="submit" class="btn-primary">Enviar Pedido</button>
</form>
```

---

## 6. Template de Declaração de Inexistência (Texto)

### 6.1 Licitações
```
Informa-se que não houve licitações realizadas no período de janeiro de 2025 a dezembro de 2025. Atualizado em: 31/01/2026.
```

### 6.2 Obras Paralisadas
```
Informa-se que não houve ocorrência de obras paralisadas no período de janeiro de 2025 a dezembro de 2025. Atualizado em: 31/01/2026.
```

### 6.3 Licitantes Sancionados
```
Informa-se que não houve licitantes ou contratados sancionados administrativamente no período de março de 2022 a fevereiro de 2026. Atualizado em: 30/03/2026.
```

### 6.4 Concursos Públicos
```
Informa-se que não houve realização de concursos públicos nos últimos 8 anos. O último certame foi realizado em 2015. Informação atualizada até a data de 15/01/2026.
```

### 6.5 Diárias
```
Informa-se que não houve pagamento de diárias no período de janeiro de 2025 a dezembro de 2025. Atualizado em: 31/01/2026.
```

### 6.6 Estagiários
```
Informa-se que não houve contratação de estagiários nos exercícios de 2023, 2024 e 2025. Atualizado em: 31/01/2026.
```

### 6.7 Informações Desclassificadas
```
Informa-se que não houve informações desclassificadas nos últimos 12 meses. Atualizado em: 31/01/2026.
```

---

## 7. Template de Carta de Serviços

```html
<div class="carta-servicos">
  <h2>Carta de Serviços ao Usuário</h2>
  
  <div class="servico">
    <h3>Solicitação de Informações</h3>
    <dl>
      <dt>Descrição</dt>
      <dd>Solicitar acesso a informações públicas não disponíveis no portal.</dd>
      
      <dt>Requisitos</dt>
      <dd>Nome, e-mail e descrição do pedido.</dd>
      
      <dt>Etapas</dt>
      <dd>1. Preencher formulário online<br>2. Receber protocolo<br>3. Aguardar resposta</dd>
      
      <dt>Prazo máximo</dt>
      <dd>20 dias (prorrogáveis por mais 10 dias, justificadamente)</dd>
      
      <dt>Forma de prestação</dt>
      <dd>Eletrônica (e-SIC) ou presencial</dd>
      
      <dt>Como manifestar</dt>
      <dd>Ouvidoria, e-SIC ou presencialmente</dd>
    </dl>
  </div>
  
  <!-- Repetir para cada serviço -->
</div>
```

---

## 8. Template de Relatório Estatístico SIC

```html
<div class="relatorio-estatistico">
  <h2>Relatório Estatístico Anual - SIC</h2>
  <p class="referência">Ano de referência: 2025</p>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Indicador</th>
        <th>Quantidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pedidos recebidos</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Pedidos atendidos</td>
        <td>145</td>
      </tr>
      <tr>
        <td>Pedidos indeferidos</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
  
  <h3>Informações genéricas sobre solicitantes</h3>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Categoria</th>
        <th>Quantidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cidadão</td>
        <td>120</td>
      </tr>
      <tr>
        <td>Empresa</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Servidor público</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>
```

---

## 9. Template de Dados Abertos

### 9.1 JSON

```json
{
  "dataset": {
    "title": "Receita Mensal",
    "description": "Dados de receita prevista e realizada",
    "license": "CC-BY-4.0",
    "frequency": "monthly",
    "tags": ["receita", "orcamento", "transparencia"],
    "resources": [
      {
        "name": "receita-2025",
        "format": "CSV",
        "url": "https://www.dominio.gov.br/dados-abertos/receita/2025.csv"
      }
    ]
  }
}
```

### 9.2 CSV

```csv
ano,mes,previsao,realizada
2025,1,10000000,9500000
2025,2,10000000,10200000
2025,3,10000000,9800000
```

---

## 10. CSS para Alto Contraste

```css
/* Modo alto contraste */
body.high-contrast {
  --bg-color: #000;
  --text-color: #fff;
  --link-color: #ff0;
  --border-color: #fff;
  --table-header-bg: #333;
  --table-border: #fff;
}

body.high-contrast {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.high-contrast a {
  color: var(--link-color);
  text-decoration: underline;
}

body.high-contrast table {
  border-color: var(--border-color);
}

body.high-contrast th {
  background-color: var(--table-header-bg);
  color: var(--text-color);
  border-color: var(--table-border);
}

body.high-contrast td {
  border-color: var(--table-border);
}
```

---

## 11. Template de Menu de Acessibilidade

```html
<div class="accessibility-tools" role="navigation" aria-label="Ferramentas de acessibilidade">
  <a href="/transparencia/acessibilidade" class="accessibility-icon" aria-label="Acessibilidade">
    <img src="/assets/icons/accessibility.svg" alt="Acessibilidade">
  </a>
  <button id="btn-contrast" aria-label="Ativar alto contraste">
    <span aria-hidden="true">◐</span>
    <span class="sr-only">Alto contraste</span>
  </button>
  <button id="btn-font-inc" aria-label="Aumentar texto">
    <span aria-hidden="true">A+</span>
  </button>
  <button id="btn-font-dec" aria-label="Diminuir texto">
    <span aria-hidden="true">A-</span>
  </button>
</div>
```