<div style="font-family: 'Segoe UI', Arial, sans-serif; border: 1px solid #d1d1d1; border-radius: 15px; width: 100%; margin: 10px 0; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden;">
    
    <div style="background-color: #367C2B; padding: 18px 30px; border-bottom: 6px solid #FFDE00; display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="background: #ffffff; color: #367C2B; padding: 4px 12px; border-radius: 4px; font-weight: bold; font-size: 0.85em; letter-spacing: 1px;">JD</div>
            <h2 style="color: #ffffff; margin: 0; font-size: 1.3em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Melhoria de Usabilidade: Identificação de Moeda</h2>
        </div>
        <div style="color: #FFDE00; font-weight: bold; font-size: 0.9em; letter-spacing: 1px;">
            OFICINA → ABERTURA DE OS
        </div>
    </div>

    <div style="padding: 30px; color: #333333;">
        
        <div style="margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eeeeee;">
            <h4 style="color: #367C2B; margin-top: 0; font-size: 1.1em; text-transform: uppercase;">Cenário Atual</h4>
            <p style="font-size: 1.05em; line-height: 1.6; margin: 10px 0 0 0; color: #1a1a1a;">
                No processo de <strong>Abertura de Ordem de Serviço</strong>, a interface não exibe a descrição da moeda utilizada, apresentando apenas o índice numérico (ex: Moeda 1, Moeda 2). Esta característica gera ambiguidade e dificulta a identificação rápida da unidade monetária por parte do usuário.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; margin-bottom: 35px;">
            
            <div style="border-left: 5px solid #367C2B; padding-left: 20px;">
                <h4 style="color: #367C2B; margin-top: 0; font-size: 1.1em; text-transform: uppercase;">Necessidade Identificada</h4>
                <p style="font-size: 1em; line-height: 1.7; color: #444444; margin: 10px 0 0 0;">
                    Disponibilizar um campo que apresente a descrição correspondente ao código selecionado, garantindo que o preenchimento e a consulta da OS sejam intuitivos.
                </p>
            </div>

            <div style="background-color: #fffdf5; padding: 20px; border-radius: 10px; border: 1px solid #f0e68c;">
                <h4 style="color: #856404; margin-top: 0; font-size: 1.05em; display: flex; align-items: center; gap: 8px;">
                    <span style="font-size: 1.2em;">💡</span> Referência Técnica:
                </h4>
                <p style="margin: 10px 0 0 0; color: #555555; font-size: 0.95em; line-height: 1.6;">
                    Seguir o padrão da rotina de <strong>Pedido de Venda (SC5)</strong>, onde a moeda é tratada de forma descritiva (ex: 1 - REAL, 2 - DÓLAR), otimizando a experiência do operador.
                </p>
            </div>
        </div>

        <div style="background-color: #367C2B; color: #ffffff; padding: 25px 30px; border-radius: 12px; display: flex; align-items: flex-start; gap: 20px; border-left: 10px solid #FFDE00;">
            <div style="font-size: 1.8em; line-height: 1; color: #FFDE00;">⚙️</div>
            <div>
                <strong style="color: #FFDE00; font-size: 1em; text-transform: uppercase; display: block; margin-bottom: 8px; letter-spacing: 1px;">Requisito Funcional:</strong>
                <p style="margin: 0; font-size: 1.05em; font-style: italic; color: #f0f0f0; line-height: 1.5;">
                    Implementar a exibição da descrição da moeda na interface de abertura e consulta de Ordens de Serviço, eliminando a dependência exclusiva de códigos numéricos e alinhando a rotina aos padrões de usabilidade do backoffice.
                </p>
            </div>
        </div>

    </div>

    <div style="background-color: #f4f4f4; padding: 12px 30px; text-align: right; border-top: 1px solid #eee;">

    </div>
</div>

<div style="font-family: 'Segoe UI', Arial, sans-serif; border: 1px solid #d1d1d1; border-radius: 15px; width: 100%; margin: 10px 0; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden;">
    
    <div style="background-color: #367C2B; padding: 18px 30px; border-bottom: 6px solid #FFDE00; display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="background: #FFDE00; color: #367C2B; padding: 4px 12px; border-radius: 4px; font-weight: bold; font-size: 0.85em; letter-spacing: 1px;">SOLUÇÃO</div>
            <h2 style="color: #ffffff; margin: 0; font-size: 1.3em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Implementação de Descrição de Moedas (O.S.)</h2>
        </div>
        <div style="color: #ffffff; font-weight: bold; font-size: 0.9em; letter-spacing: 1px;">
            STATUS: <span style="color: #FFDE00;">PLANEJADO</span>
        </div>
    </div>

    <div style="padding: 30px; color: #333333;">
        
        <p style="font-size: 1.05em; line-height: 1.6; margin: 0 0 25px 0; color: #1a1a1a;">
            Para atender à necessidade de clareza operacional na <strong>Abertura de OS</strong>, foi definida a implementação de um novo campo descritivo vinculado a moeda escolhida no momento da abertura da ordem de seviço.
        </p>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px;">
            
            <div style="background: #f8faf8; padding: 20px; border-left: 4px solid #367C2B; border-radius: 4px;">
                <h4 style="color: #367C2B; margin-top: 0; font-size: 1em; text-transform: uppercase;">Autopreenchimento via Gatilho SX7</h4>
                <p style="margin: 10px 0 0 0; line-height: 1.6; color: #444; font-size: 0.95em;">
                    Exibição automática da descrição ao informar o código da moeda. O sistema realiza a exibição da descrição da moeda no momento da escolha do código da moeda desejada instantaneamente.
                </p>
            </div>

            <div style="background: #f8faf8; padding: 20px; border-left: 4px solid #367C2B; border-radius: 4px;">
                <h4 style="color: #367C2B; margin-top: 0; font-size: 1em; text-transform: uppercase;">Melhoria de usabilidade</h4>
                <p style="margin: 10px 0 0 0; line-height: 1.6; color: #444; font-size: 0.95em;">
                    Substituição do campo numérico por um componente do tipo <strong>Combo Box</strong>, permitindo a escolha direta (ex: <i>1 - PESO, 2 - DOLLAR</i>).
                </p>
            </div>
        </div>

        <div style="background-color: #f4f4f4; border: 1px dashed #367C2B; padding: 20px; border-radius: 10px; margin-bottom: 30px; display: flex; align-items: center; gap: 20px;">
            <div style="font-size: 2.5em;">📖</div>
            <div style="flex: 1;">
                <h4 style="margin: 0; color: #367C2B; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.5px;">Dicionário de Dados</h4>
                <p style="margin: 5px 0 10px 0; font-size: 0.95em; color: #555;">Confira as especificações técnicas de criação do campo, tamanho e validações na documentação oficial:</p>
                <a href="LINK_DA_SUA_DOCUMENTACAO_AQUI" target="_blank" style="display: inline-block; background-color: #367C2B; color: #ffffff; text-decoration: none; padding: 8px 18px; border-radius: 5px; font-weight: bold; font-size: 0.9em; transition: background 0.3s;">
                    Acessar Dicionário de Dados →
                </a>
            </div>
        </div>

        <div style="background-color: #367C2B; color: #ffffff; padding: 25px 30px; border-radius: 12px; display: flex; align-items: center; gap: 20px; border-right: 10px solid #FFDE00;">
            <div style="font-size: 2em; line-height: 1;">🚀</div>
            <div style="flex: 1;">
                <strong style="color: #FFDE00; font-size: 1em; text-transform: uppercase; display: block; margin-bottom: 5px; letter-spacing: 1px;">Objetivo Final:</strong>
                <p style="margin: 0; font-size: 1.05em; font-style: italic; color: #f0f0f0; line-height: 1.5;">
                    Aumentar a clareza das informações, reduzir erros operacionais e alinhar a interface de Oficina aos padrões globais de usabilidade do sistema.
                </p>
            </div>
        </div>

    </div>

    <div style="background-color: #f4f4f4; padding: 12px 30px; text-align: right; border-top: 1px solid #eee;">
        <span style="font-size: 0.8em; color: #777;">John Deere Technical Solution - System Interface Alignment</span>
    </div>
</div>