# Rotas Ativas — Scroll Interno do Painel — Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Fazer o painel "Rotas Ativas" ocupar a altura disponível da viewport e ativar scroll interno a partir do 11º registro.

**Architecture:** Duas mudanças cirúrgicas de atributos HTML em `central.php`: o container do painel vira flex-column com `max-height` baseado em `100vh`, e o wrapper da tabela troca `max-h-[350px]` por `flex-1 min-h-0` para crescer e ocupar o espaço restante.

**Tech Stack:** Tailwind CSS (classes utilitárias inline no PHP), HTML.

## Global Constraints

- Nenhuma alteração em `maps.js` ou qualquer outro arquivo JS/PHP.
- Nenhuma mudança de backend.
- As classes Tailwind adicionadas devem estar disponíveis via CDN/build já em uso no projeto (todas são utilitárias padrão: `flex`, `flex-col`, `flex-1`, `min-h-0`).
- O `margin-top:100px` existente no style inline do painel não pode ser removido.

---

### Task 1: Aplicar layout flex-column no painel e troca do wrapper da tabela

**Spec:** `docs/superpowers/specs/2026-06-22-rotas-ativas-scroll-design.md`

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Central/html/central.php:3570` (painel externo)
- Modify: `componentes/Missoes/Logistica/sinais/Central/html/central.php:3574` (wrapper da tabela)

**Interfaces:**
- Consumes: nada de tasks anteriores
- Produces: nada consumido por tasks futuras — mudança puramente visual

> **Nota:** Esta feature é CSS/layout puro. Não há lógica testável via testes automatizados. A verificação é manual no browser conforme descrito abaixo.

- [ ] **Step 1: Localizar os dois trechos alvo em `central.php`**

Abrir `componentes/Missoes/Logistica/sinais/Central/html/central.php` e confirmar as linhas:

```
linha ~3570  →  <div id="rotas-summary-panel" style="margin-top:100px;" class="fixed left-5 z-30 g-painel-flutuante max-w-[420px]">
linha ~3574  →  <div class="max-h-[350px] overflow-y-auto">
```

- [ ] **Step 2: Alterar o painel externo (linha ~3570)**

Substituir:
```html
<div id="rotas-summary-panel" style="margin-top:100px;" class="fixed left-5 z-30 g-painel-flutuante max-w-[420px]">
```

Por:
```html
<div id="rotas-summary-panel" style="margin-top:100px; max-height:calc(100vh - 120px);" class="fixed left-5 z-30 g-painel-flutuante max-w-[420px] flex flex-col">
```

O valor `120px` = `100px` (margin-top) + `20px` (folga de respiro na borda inferior da tela).

- [ ] **Step 3: Alterar o wrapper da tabela (linha ~3574)**

Substituir:
```html
<div class="max-h-[350px] overflow-y-auto">
```

Por:
```html
<div class="flex-1 min-h-0 overflow-y-auto">
```

`flex-1` → cresce para preencher o espaço vertical disponível dentro do painel.  
`min-h-0` → necessário para que flex-children comprimir corretamente (sem ele o navegador ignora `overflow-y: auto` em determinados engines).

- [ ] **Step 4: Verificação visual — cenário ≤ 10 rotas**

Abrir a Central no browser. Com 10 ou menos rotas ativas:
- O painel deve ter altura natural (sem espaço vazio excessivo abaixo dos filtros).
- Os filtros ("Com Horários", "Sem Rota") e o botão Portaria devem aparecer imediatamente abaixo da tabela.
- Nenhum scroll deve aparecer.

- [ ] **Step 5: Verificação visual — cenário > 10 rotas**

Com mais de 10 rotas ativas (ou reduzindo a janela do browser para simular):
- A tabela deve exibir uma scrollbar vertical interna.
- O header do painel ("Rotas Ativas") deve permanecer visível no topo.
- Os filtros ("Com Horários", "Sem Rota") e o botão Portaria devem permanecer visíveis na base do painel, fora da área de scroll.
- O mapa deve continuar totalmente independente da navegação da lista.

- [ ] **Step 6: Verificação visual — modo recolhido**

Clicar no botão de toggle (`isRotasTableCollapsed`) para recolher o painel:
- O comportamento de scroll deve ser idêntico ao modo expandido.
- Apenas a largura do painel deve mudar.

- [ ] **Step 7: Commit**

```bash
git add componentes/Missoes/Logistica/sinais/Central/html/central.php
git commit -m "feat(central): scroll interno no painel Rotas Ativas a partir do 11º registro

Painel vira flex-column com max-height calc(100vh - 120px).
Wrapper da tabela usa flex-1/min-h-0 em vez de max-h-[350px],
permitindo que a lista cresça até a viewport e ative scroll interno.
Filtros e botão Portaria permanecem ancorados na base do painel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```