# Compositional Forms - Padrões de Formulários PharmData

> Inspirado nos princípios do PEN&PAD Data Entry System

---

## Filosofia

> "Dados precisam ser descritos, não apenas rotulados."

O sistema de formulários PharmData adota uma abordagem **composicional**: descrições complexas são construídas a partir de elementos simples, com revelação progressiva de detalhes.

### Aplicações Principais

#### 1. Curadoria de Dados
Entrada, validação e enriquecimento de informações estruturadas:
- Cadastro de substâncias, produtos, organizações
- Mapeamento para terminologias externas (SNOMED, SPOR, ATC)
- Controle de qualidade e completude
- Workflow de revisão e aprovação

#### 2. Prescrição de Medicamentos
Seleção e composição de produtos farmacêuticos:
- Busca contextual de medicamentos
- Construção de prescrições (substância + dose + forma + frequência)
- Filtros inteligentes por indicação, via, restrições
- Geração de texto prescritivo padronizado

---

## Fundamentação em Padrões Modernos

A abordagem composicional não é legado histórico - é a arquitetura central dos principais padrões de terminologia e interoperabilidade em saúde.

### SNOMED CT - Pós-Coordenação

O SNOMED CT (padrão ISO 17115) usa composição como mecanismo fundamental:

```
// Pré-coordenado (conceito fixo)
22298006 | Myocardial infarction |

// Pós-coordenado (composição)
22298006 | Myocardial infarction |
  : 363698007 | Finding site | = 80891009 | Heart structure |
  , 116676008 | Associated morphology | = 55641003 | Infarct |
```

**Aplicação PharmData**: Substâncias e produtos podem ser descritos composicionalmente:
- Substância + Forma + Dose + Via → Produto
- Produto + Quantidade + Embalagem → Apresentação

### HL7 FHIR - Recursos Composicionais

O FHIR (Fast Healthcare Interoperability Resources) estrutura dados como composição de recursos:

```json
{
  "resourceType": "MedicationRequest",
  "medicationCodeableConcept": {
    "coding": [{"system": "http://snomed.info/sct", "code": "..."}]
  },
  "dosageInstruction": [{
    "doseAndRate": [{"doseQuantity": {"value": 500, "unit": "mg"}}],
    "timing": {"repeat": {"frequency": 3, "period": 1, "periodUnit": "d"}}
  }]
}
```

### IDMP - Identificação de Medicamentos

O padrão ISO IDMP (11615, 11616, 11238, 11239, 11240) para identificação de medicamentos é inteiramente composicional:

- **Substance** → ingrediente ativo
- **Specified Substance** → substância + detalhes
- **Pharmaceutical Product** → composição de substâncias + forma
- **Medicinal Product** → produto farmacêutico + indicação + via
- **Packaged Medicinal Product** → produto + embalagem

### Progressive Disclosure - Padrões de UX

Recomendado por:
- **Nielsen Norman Group** - "Progressive Disclosure" (1983-presente)
- **Apple Human Interface Guidelines** - "Reveal complexity progressively"
- **Material Design** - "Progressive disclosure patterns"
- **IBM Carbon Design System** - "Show only essential information first"

### Validação da Abordagem

| Padrão | Organização | Composicional | Progressive |
|--------|-------------|---------------|-------------|
| SNOMED CT | IHTSDO/SNOMED Intl | ✅ Pós-coordenação | ✅ Refinamentos |
| HL7 FHIR | HL7 International | ✅ Recursos | ✅ Profiles |
| IDMP | ISO/EMA | ✅ 5 níveis | ✅ Hierarquia |
| openEHR | openEHR Foundation | ✅ Archetypes | ✅ Templates |
| CDISC | CDISC | ✅ Domains | ✅ Controlled terms |

---

## 1. Progressive Disclosure (Revelação Progressiva)

### Conceito

Formulários mostram inicialmente apenas o essencial, com acesso a maior detalhe sob demanda. Isso mantém a interface limpa enquanto permite profundidade.

### Sistema de Camadas

| Camada | Nome | Visibilidade | Conteúdo |
|--------|------|--------------|----------|
| **L1** | Primary | Sempre visível | Campos essenciais, obrigatórios |
| **L2** | Additional | Botão "Additional" | Campos menos comuns |
| **L3** | More | Modal/Popover | Detalhes expandidos de um item |
| **L4** | Further | Expansão total | Todas as opções disponíveis |

### Implementação HTML + HTMX

```html
<!-- Estrutura base de formulário com camadas -->
<form class="phd-form" id="substance-form">

    <!-- LAYER 1: Primary - Sempre visível -->
    <section class="form-layer form-layer-primary">
        <h3 class="layer-title">
            <i class="fas fa-flask text-teal-intense mr-2"></i>
            Identificação
        </h3>

        <div class="form-grid">
            <div class="form-field">
                <label class="field-label required">Nome</label>
                <input type="text" name="name" required
                       class="field-input" />
            </div>

            <div class="form-field">
                <label class="field-label required">UNII Code</label>
                <input type="text" name="unii_code" required
                       class="field-input font-mono" />
            </div>

            <div class="form-field">
                <label class="field-label">CAS Number</label>
                <input type="text" name="cas_number"
                       class="field-input font-mono" />
            </div>
        </div>
    </section>

    <!-- LAYER 2: Additional - Revelado sob demanda -->
    <div class="layer-toggle">
        <button type="button"
                class="btn-layer-toggle"
                hx-get="/forms/substance/additional"
                hx-target="#additional-fields"
                hx-swap="innerHTML"
                onclick="this.style.display='none'">
            <i class="fas fa-plus-circle mr-2"></i>
            Additional
            <span class="text-soft-steel text-xs ml-2">(códigos externos, sinônimos)</span>
        </button>
    </div>

    <section class="form-layer form-layer-additional hidden" id="additional-fields">
        <!-- Carregado via HTMX -->
    </section>

    <!-- LAYER 3: More - Para itens específicos -->
    <section class="form-layer form-layer-associations">
        <h3 class="layer-title">
            <i class="fas fa-link text-teal-intense mr-2"></i>
            Classificações
        </h3>

        <div class="association-list">
            <div class="association-item">
                <span class="drop drop-atc">ATC</span>
                <span class="association-value">N02BE01</span>
                <button type="button"
                        class="btn-more"
                        hx-get="/classifications/atc/N02BE01/details"
                        hx-target="#modal-content">
                    More...
                </button>
            </div>
        </div>

        <!-- LAYER 4: Further - Expansão total -->
        <button type="button"
                class="btn-further"
                hx-get="/forms/substance/all-classifications"
                hx-target="#further-classifications">
            <i class="fas fa-ellipsis-h mr-2"></i>
            Further...
        </button>

        <div id="further-classifications"></div>
    </section>

</form>
```

### CSS dos Componentes

```css
/* === LAYER SYSTEM === */

.form-layer {
    @apply bg-white border border-soft-arctic rounded-lg p-4 mb-4;
}

.form-layer-primary {
    @apply border-l-4 border-l-teal-intense;
}

.form-layer-additional {
    @apply border-l-4 border-l-soft-steel bg-arctic-mist/30;
}

.layer-title {
    @apply text-sm font-semibold text-emerald-abyss mb-4
           flex items-center;
}

/* === LAYER TOGGLE BUTTONS === */

.btn-layer-toggle {
    @apply w-full py-3 px-4
           text-sm text-soft-steel
           bg-arctic-mist hover:bg-soft-arctic
           border border-dashed border-soft-steel/30
           rounded-lg
           flex items-center justify-center
           transition-all duration-200;
}

.btn-layer-toggle:hover {
    @apply text-graphite-depth border-solid;
}

.btn-more {
    @apply text-xs text-teal-intense hover:text-emerald-abyss
           underline underline-offset-2;
}

.btn-further {
    @apply mt-3 py-2 px-3
           text-xs text-soft-steel hover:text-graphite-depth
           bg-transparent hover:bg-arctic-mist
           border border-soft-arctic rounded
           flex items-center;
}

/* === FORM FIELDS === */

.form-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

.form-field {
    @apply flex flex-col;
}

.field-label {
    @apply text-xs font-medium text-soft-steel mb-1;
}

.field-label.required::after {
    content: ' *';
    @apply text-red-500;
}

.field-input {
    @apply px-3 py-2
           text-sm text-graphite-depth
           bg-white
           border border-soft-arctic rounded
           focus:border-teal-intense focus:ring-1 focus:ring-teal-intense/20
           transition-all duration-200;
}

.field-input:disabled {
    @apply bg-arctic-mist text-soft-steel cursor-not-allowed;
}
```

---

## 2. Compositional Data Entry

### Conceito

Construir descrições complexas combinando elementos simples. O sistema gera automaticamente expressões em linguagem natural a partir dos dados estruturados.

### Estrutura de Composição

```
[Entidade Principal] + [Modificadores] + [Qualificadores] → Descrição Natural
```

### Exemplo: Curadoria - Cadastro de Produto

```python
# Dados estruturados
product = {
    "substance": "Amoxicilina",
    "strength": {"value": 500, "unit": "mg"},
    "form": "cápsula",
    "characteristics": ["gelatinosa", "dura"],
    "quantity": 21,
    "packaging": "blister"
}

# Geração de texto natural
def generate_product_description(prod):
    chars = ", ".join(prod.get("characteristics", []))
    return (
        f"{prod['substance']} "
        f"{prod['strength']['value']}{prod['strength']['unit']} "
        f"{prod['form']}"
        f"{f' ({chars})' if chars else ''}, "
        f"caixa com {prod['quantity']} unidades em {prod['packaging']}"
    )

# Output
"Amoxicilina 500mg cápsula (gelatinosa, dura), caixa com 21 unidades em blister"
```

### Exemplo: Prescrição - Composição de Receita

```python
# Dados estruturados
prescription = {
    "medication": "Amoxicilina 500mg cápsula",
    "dosage": {"value": 1, "unit": "cápsula"},
    "frequency": {"interval": 8, "unit": "horas"},
    "duration": {"value": 7, "unit": "dias"},
    "route": "via oral",
    "instructions": ["tomar com água", "longe das refeições"]
}

# Geração de texto prescritivo
def generate_prescription_text(rx):
    instructions = ". ".join(rx.get("instructions", []))
    return (
        f"{rx['medication']}\n"
        f"Tomar {rx['dosage']['value']} {rx['dosage']['unit']} "
        f"de {rx['frequency']['interval']}/{rx['frequency']['interval']} {rx['frequency']['unit']} "
        f"por {rx['duration']['value']} {rx['duration']['unit']}, {rx['route']}.\n"
        f"{instructions.capitalize()}."
    )

# Output
"""
Amoxicilina 500mg cápsula
Tomar 1 cápsula de 8/8 horas por 7 dias, via oral.
Tomar com água. Longe das refeições.
"""
```

### Implementação do Composition Builder

```html
<!-- Composition Builder Component -->
<div class="composition-builder" id="product-composer">

    <!-- Slots de composição -->
    <div class="composition-slots">

        <!-- Slot: Substância -->
        <div class="comp-slot" data-slot="substance">
            <label class="slot-label">Substância</label>
            <div class="slot-content">
                <input type="text"
                       class="slot-input"
                       name="substance"
                       hx-get="/search/substances"
                       hx-trigger="keyup changed delay:300ms"
                       hx-target="#substance-suggestions"
                       placeholder="Buscar substância..." />
                <div id="substance-suggestions" class="suggestions-dropdown"></div>
            </div>
        </div>

        <!-- Slot: Concentração -->
        <div class="comp-slot" data-slot="strength">
            <label class="slot-label">Concentração</label>
            <div class="slot-content slot-composite">
                <input type="number" name="strength_value"
                       class="slot-input-small" placeholder="500" />
                <select name="strength_unit" class="slot-select">
                    <option value="mg">mg</option>
                    <option value="g">g</option>
                    <option value="mcg">mcg</option>
                    <option value="UI">UI</option>
                    <option value="mL">mL</option>
                </select>
            </div>
        </div>

        <!-- Slot: Forma Farmacêutica -->
        <div class="comp-slot" data-slot="form">
            <label class="slot-label">Forma</label>
            <div class="slot-content">
                <select name="pharmaceutical_form" class="slot-select-full"
                        hx-get="/forms/characteristics"
                        hx-target="#characteristics-options"
                        hx-trigger="change">
                    <option value="">Selecione...</option>
                    <option value="comprimido">Comprimido</option>
                    <option value="cápsula">Cápsula</option>
                    <option value="solução">Solução</option>
                    <!-- ... -->
                </select>
            </div>
        </div>

        <!-- Slot: Características (contextual) -->
        <div class="comp-slot comp-slot-contextual" data-slot="characteristics">
            <label class="slot-label">Características</label>
            <div class="slot-content" id="characteristics-options">
                <!-- Carregado dinamicamente baseado na forma -->
            </div>
        </div>

    </div>

    <!-- Preview da composição -->
    <div class="composition-preview">
        <label class="preview-label">
            <i class="fas fa-eye mr-2"></i>Preview
        </label>
        <div class="preview-output" id="composition-output"
             hx-get="/compose/preview"
             hx-trigger="change from:.comp-slot delay:500ms"
             hx-include="#product-composer">
            <span class="text-soft-steel italic">
                Preencha os campos para visualizar...
            </span>
        </div>
    </div>

</div>
```

### CSS do Composition Builder

```css
/* === COMPOSITION BUILDER === */

.composition-builder {
    @apply bg-white border border-soft-arctic rounded-lg p-4;
}

.composition-slots {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4;
}

.comp-slot {
    @apply flex flex-col;
}

.comp-slot-contextual {
    @apply lg:col-span-2;
}

.slot-label {
    @apply text-xs font-medium text-soft-steel mb-1;
}

.slot-content {
    @apply relative;
}

.slot-composite {
    @apply flex gap-2;
}

.slot-input,
.slot-select-full {
    @apply w-full px-3 py-2
           text-sm text-graphite-depth
           bg-white border border-soft-arctic rounded
           focus:border-teal-intense;
}

.slot-input-small {
    @apply w-20 px-2 py-2
           text-sm text-graphite-depth text-right
           bg-white border border-soft-arctic rounded
           focus:border-teal-intense;
}

.slot-select {
    @apply px-2 py-2
           text-sm text-graphite-depth
           bg-white border border-soft-arctic rounded
           focus:border-teal-intense;
}

/* === COMPOSITION PREVIEW === */

.composition-preview {
    @apply border-t border-soft-arctic pt-4;
}

.preview-label {
    @apply text-xs font-medium text-soft-steel mb-2 block;
}

.preview-output {
    @apply px-4 py-3
           bg-mint-signal/20
           border border-mint-signal/30
           rounded-lg
           text-sm text-emerald-abyss font-medium;
}

/* === SUGGESTIONS DROPDOWN === */

.suggestions-dropdown {
    @apply absolute top-full left-0 right-0 z-10
           mt-1 max-h-48 overflow-y-auto
           bg-white border border-soft-arctic rounded-lg shadow-lg;
}

.suggestions-dropdown:empty {
    @apply hidden;
}

.suggestion-item {
    @apply px-3 py-2
           text-sm text-graphite-depth
           hover:bg-arctic-mist
           cursor-pointer
           border-b border-soft-arctic/50 last:border-0;
}
```

---

## 3. Contextual Filtering (Filtros Inteligentes)

### Conceito

Baseado no conceito de "sanctions" e "visibilities" do PEN&PAD: mostrar apenas opções que fazem sentido no contexto atual.

### Implementação

```python
# Backend: Filtros contextuais
class ContextualFieldService:

    # Mapeamento de campos por contexto
    FIELD_VISIBILITY = {
        "injetável": {
            "show": ["reconstituição", "diluição", "compatibilidades", "estabilidade"],
            "hide": ["sabor", "mastigável", "revestimento_entérico"]
        },
        "oral_sólido": {
            "show": ["revestimento", "sulco", "mastigável", "sabor"],
            "hide": ["reconstituição", "diluição", "osmolaridade"]
        },
        "oral_líquido": {
            "show": ["sabor", "viscosidade", "conservantes", "pH"],
            "hide": ["sulco", "mastigável", "revestimento"]
        },
        "tópico": {
            "show": ["veículo", "pH", "conservantes", "área_aplicação"],
            "hide": ["sabor", "mastigável", "reconstituição"]
        }
    }

    def get_visible_fields(self, form_type: str, context: dict) -> list:
        """Retorna campos visíveis baseado no contexto"""

        via = context.get("via_administracao", "")
        visibility = self.FIELD_VISIBILITY.get(via, {})

        all_fields = self.get_all_fields(form_type)
        show = visibility.get("show", [])
        hide = visibility.get("hide", [])

        # Prioridade: show explícito, depois remover hide
        if show:
            return [f for f in all_fields if f in show]
        return [f for f in all_fields if f not in hide]
```

```html
<!-- Frontend: Campos contextuais -->
<div class="contextual-section"
     hx-get="/forms/product/contextual-fields"
     hx-trigger="change from:#via-administracao"
     hx-include="#via-administracao"
     hx-swap="innerHTML">

    <!-- Placeholder inicial -->
    <p class="text-soft-steel text-sm italic">
        Selecione a via de administração para ver campos específicos
    </p>

</div>
```

---

## 4. Seções Estruturadas

### Padrão de Organização

As seções seguem um padrão consistente adaptado para cada contexto:

#### Contexto: Curadoria de Dados

| Seção | Conteúdo | Exemplo |
|-------|----------|---------|
| **Identificação** | Nome, códigos, status, business key | SUB-082615, UNII, CAS |
| **Relacionamentos** | Vínculos com outras entidades | Substâncias pai, sinônimos |
| **Atributos** | Propriedades específicas da entidade | Peso molecular, fórmula |
| **Classificações** | Códigos de terminologias externas | ATC, DCB, SNOMED, IDMP |
| **Qualidade** | Indicadores de completude e validação | Status, pendências, histórico |

#### Contexto: Prescrição de Medicamentos

| Seção | Conteúdo | Exemplo |
|-------|----------|---------|
| **Medicamento** | Seleção do produto | Amoxicilina 500mg cápsula |
| **Posologia** | Dose, frequência, duração | 1 cápsula 8/8h por 7 dias |
| **Via/Forma** | Via de administração | Via oral |
| **Orientações** | Instruções ao paciente | Tomar com água, longe das refeições |
| **Alertas** | Interações, contraindicações | Alergia a penicilinas |

### Template de Formulário Completo

```html
<form class="phd-compositional-form" id="product-form">

    <!-- Seção 1: Identificação -->
    <section class="form-section" data-section="identification">
        <header class="section-header">
            <h3 class="section-title">
                <i class="fas fa-fingerprint text-teal-intense"></i>
                Identificação
            </h3>
            <span class="section-badge">Obrigatório</span>
        </header>

        <div class="section-content">
            <!-- Campos de identificação -->
        </div>
    </section>

    <!-- Seção 2: Composição (Relacionamentos) -->
    <section class="form-section" data-section="composition">
        <header class="section-header">
            <h3 class="section-title">
                <i class="fas fa-layer-group text-teal-intense"></i>
                Composição
            </h3>
            <button type="button" class="btn-section-toggle">
                <i class="fas fa-chevron-down"></i>
            </button>
        </header>

        <div class="section-content">
            <!-- Lista de substâncias ativas -->
            <div class="subsection">
                <h4 class="subsection-title">Substâncias Ativas</h4>
                <div id="active-substances-list">
                    <!-- Items dinâmicos -->
                </div>
                <button type="button"
                        class="btn-add-item"
                        hx-get="/forms/product/add-substance"
                        hx-target="#active-substances-list"
                        hx-swap="beforeend">
                    <i class="fas fa-plus"></i> Adicionar substância
                </button>
            </div>

            <!-- Lista de excipientes -->
            <div class="subsection">
                <h4 class="subsection-title">Excipientes</h4>
                <!-- Similar structure -->
            </div>
        </div>
    </section>

    <!-- Seção 3: Atributos -->
    <section class="form-section" data-section="attributes">
        <header class="section-header">
            <h3 class="section-title">
                <i class="fas fa-sliders-h text-teal-intense"></i>
                Atributos
            </h3>
        </header>

        <div class="section-content">
            <!-- Campos contextuais baseados no tipo -->
        </div>
    </section>

    <!-- Seção 4: Classificações -->
    <section class="form-section" data-section="classifications">
        <header class="section-header">
            <h3 class="section-title">
                <i class="fas fa-tags text-teal-intense"></i>
                Classificações
            </h3>
        </header>

        <div class="section-content">
            <!-- ATC, DCB, SNOMED, etc. -->
        </div>
    </section>

</form>
```

### CSS das Seções

```css
/* === FORM SECTIONS === */

.form-section {
    @apply bg-white
           border border-soft-arctic
           rounded-lg
           mb-4
           overflow-hidden;
}

.section-header {
    @apply flex items-center justify-between
           px-4 py-3
           bg-arctic-mist/50
           border-b border-soft-arctic;
}

.section-title {
    @apply flex items-center gap-2
           text-sm font-semibold text-emerald-abyss;
}

.section-badge {
    @apply px-2 py-0.5
           text-xs font-medium
           bg-teal-intense/10 text-teal-intense
           rounded;
}

.section-content {
    @apply p-4;
}

.btn-section-toggle {
    @apply p-1 text-soft-steel hover:text-graphite-depth
           transition-transform duration-200;
}

.btn-section-toggle[aria-expanded="false"] {
    @apply -rotate-90;
}

/* === SUBSECTIONS === */

.subsection {
    @apply mb-4 last:mb-0;
}

.subsection-title {
    @apply text-xs font-medium text-soft-steel
           uppercase tracking-wide
           mb-2;
}

.btn-add-item {
    @apply mt-2 py-2 px-3
           text-xs text-teal-intense
           bg-transparent hover:bg-teal-intense/5
           border border-dashed border-teal-intense/30
           rounded
           flex items-center gap-2
           transition-all duration-200;
}

.btn-add-item:hover {
    @apply border-solid;
}
```

---

## 5. Natural Language Generation

### Padrão de Geração

```python
# services/natural_language.py

class NaturalLanguageGenerator:
    """Gera expressões em linguagem natural a partir de dados estruturados"""

    def __init__(self, language: str = "pt-BR"):
        self.language = language
        self.templates = self._load_templates()

    def generate_product_description(self, product: dict) -> str:
        """Gera descrição completa de um produto farmacêutico"""

        parts = []

        # Nome da substância
        parts.append(product.get("substance_name", ""))

        # Concentração
        if strength := product.get("strength"):
            parts.append(f"{strength['value']}{strength['unit']}")

        # Forma farmacêutica
        if form := product.get("pharmaceutical_form"):
            parts.append(form)

        # Características
        if chars := product.get("characteristics"):
            chars_str = ", ".join(chars)
            parts.append(f"({chars_str})")

        # Apresentação
        if presentation := product.get("presentation"):
            qty = presentation.get("quantity", "")
            pack = presentation.get("packaging", "")
            if qty and pack:
                parts.append(f"- {qty} unidades em {pack}")

        return " ".join(filter(None, parts))

    def generate_substance_summary(self, substance: dict) -> str:
        """Gera resumo de uma substância"""

        name = substance.get("name", "")

        # Códigos
        codes = []
        if unii := substance.get("unii_code"):
            codes.append(f"UNII: {unii}")
        if cas := substance.get("cas_number"):
            codes.append(f"CAS: {cas}")

        codes_str = f" ({', '.join(codes)})" if codes else ""

        # Classificação
        classification = ""
        if atc := substance.get("atc_code"):
            classification = f" - Classificação ATC: {atc}"

        return f"{name}{codes_str}{classification}"

    def generate_version_summary(self, old: dict, new: dict) -> str:
        """Gera resumo de mudanças entre versões"""

        changes = []

        for key in new.keys():
            old_val = old.get(key)
            new_val = new.get(key)

            if old_val != new_val:
                field_name = self._get_field_label(key)
                if old_val and new_val:
                    changes.append(f"{field_name}: '{old_val}' → '{new_val}'")
                elif new_val:
                    changes.append(f"{field_name}: adicionado '{new_val}'")
                else:
                    changes.append(f"{field_name}: removido '{old_val}'")

        if not changes:
            return "Nenhuma alteração detectada"

        return "; ".join(changes)
```

### Componente de Exibição

```html
<!-- Natural Language Output Component -->
<div class="nl-output">
    <div class="nl-output-header">
        <i class="fas fa-language text-teal-intense"></i>
        <span>Descrição Gerada</span>
    </div>
    <div class="nl-output-content">
        {{ generated_description }}
    </div>
    <div class="nl-output-actions">
        <button type="button" class="btn-copy"
                onclick="copyToClipboard('{{ generated_description }}')">
            <i class="fas fa-copy"></i> Copiar
        </button>
    </div>
</div>
```

```css
.nl-output {
    @apply bg-cloud border border-soft-arctic rounded-lg overflow-hidden;
}

.nl-output-header {
    @apply flex items-center gap-2
           px-4 py-2
           bg-arctic-mist
           text-xs font-medium text-soft-steel;
}

.nl-output-content {
    @apply px-4 py-3
           text-sm text-graphite-depth
           leading-relaxed;
}

.nl-output-actions {
    @apply px-4 py-2
           border-t border-soft-arctic
           flex justify-end;
}

.btn-copy {
    @apply px-2 py-1
           text-xs text-soft-steel hover:text-teal-intense
           flex items-center gap-1;
}
```

---

## Checklist de Implementação

Ao criar um novo formulário, verifique:

- [ ] Aplica sistema de camadas (L1-L4)?
- [ ] Campos essenciais estão em L1?
- [ ] Tem botão "Additional" para campos secundários?
- [ ] Usa "More..." para detalhes de itens?
- [ ] Segue estrutura de seções padrão?
- [ ] Implementa filtros contextuais onde aplicável?
- [ ] Gera preview em linguagem natural?
- [ ] Campos usam HTMX para interatividade?
- [ ] Segue padrão visual PharmData (cores, espaçamento)?

---

## Referências

- Kirby, J. & Rector, A.L. (1996). "The PEN&PAD Data Entry System: From prototype to practical system." AMIA Annual Symposium.
- GALEN Project - Terminology Services for Clinical Information Systems
- PharmData Design Principles v2.2.0

---

*Última atualização: 2025-11-19*
*Versão: 1.0.0*