{% extends 'base.html' %}

{% block title %}Monitor de Glicose{% endblock %}

{% block content %}
<!-- Page Header -->
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
    <div style="background-color: #f5f3ff; color: #8b5cf6; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
    </div>
    <div style="flex-grow: 1;">
        <h1 style="color: #0f172a; font-size: 1.5rem; font-weight: 800; margin: 0 0 0.25rem 0;">Monitor de Glicose</h1>
        <p style="color: #64748b; font-size: 0.95rem; margin: 0;">Como conseguir e as tiras reagentes disponíveis</p>
    </div>
</div>

<!-- Section 1: Como Conseguir -->
<div class="glass-card" style="padding: 1.5rem;">
    <h2 style="font-size: 1.1rem; color: #0f766e; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
        Como Conseguir o Monitor de Glicose
    </h2>
    <p style="font-size: 0.95rem; color: #475569; margin-bottom: 1.25rem; line-height: 1.5;">
        O monitor de glicemia capilar (glicosímetro) é fornecido pelo SUS para pacientes diabéticos que utilizam insulina. Para solicitar, o paciente deve:
    </p>
    
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="background: #0d9488; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;">1</span>
            <span style="font-size: 0.95rem; color: #334155; padding-top: 0.1rem;">Ter prescrição médica com indicação de monitorização de glicemia capilar.</span>
        </div>
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="background: #0d9488; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;">2</span>
            <span style="font-size: 0.95rem; color: #334155; padding-top: 0.1rem;">Apresentar receita médica com o CID de Diabetes (E10, E11, E13 ou O24).</span>
        </div>
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="background: #0d9488; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;">3</span>
            <span style="font-size: 0.95rem; color: #334155; padding-top: 0.1rem;">Levar documento de identidade (RG ou CPF) e Cartão SUS.</span>
        </div>
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="background: #0d9488; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;">4</span>
            <span style="font-size: 0.95rem; color: #334155; padding-top: 0.1rem;">Comparecer à Farmácia Municipal de Itamonte com a documentação.</span>
        </div>
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="background: #0d9488; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;">5</span>
            <span style="font-size: 0.95rem; color: #334155; padding-top: 0.1rem;">Preencher o formulário de solicitação do programa de automonitoramento.</span>
        </div>
    </div>
</div>

<!-- Section 2: Quantities -->
<h2 style="font-size: 1.1rem; color: #0f172a; font-weight: 700; margin: 2rem 0 1rem 0; display: flex; align-items: center; gap: 0.5rem;">
    <svg viewBox="0 0 24 24" fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
    Tiras Reagentes — Quantidade por Tipo de Diabetes
</h2>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
    <!-- Diabetes Tipo 1 -->
    <div style="background: white; border: 1px solid #bfdbfe; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
        <span style="display: inline-block; background: #dbeafe; color: #2563eb; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 1rem; border-radius: 20px; margin-bottom: 1rem;">Diabetes Tipo 1</span>
        <div style="font-size: 3rem; font-weight: 800; color: #1e3a8a; line-height: 1;">100</div>
        <div style="color: #3b82f6; font-size: 0.95rem; font-weight: 500; margin-bottom: 1rem;">tiras reagentes</div>
        <div style="background: #eff6ff; color: #2563eb; padding: 0.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem;">A cada 40 dias</div>
        <div style="font-size: 0.85rem; color: #64748b;">Equivale a aproximadamente 2-3 medições por dia</div>
    </div>

    <!-- Gestacional -->
    <div style="background: white; border: 1px solid #fbcfe8; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
        <span style="display: inline-block; background: #fce7f3; color: #db2777; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 1rem; border-radius: 20px; margin-bottom: 1rem;">Diabetes Gestacional</span>
        <div style="font-size: 3rem; font-weight: 800; color: #831843; line-height: 1;">100</div>
        <div style="color: #ec4899; font-size: 0.95rem; font-weight: 500; margin-bottom: 1rem;">tiras reagentes</div>
        <div style="background: #fdf2f8; color: #db2777; padding: 0.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem;">A cada 40 dias</div>
        <div style="font-size: 0.85rem; color: #64748b;">Acompanhamento mais frequente durante a gestação</div>
    </div>

    <!-- Diabetes Tipo 2 -->
    <div style="background: white; border: 1px solid #a7f3d0; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
        <span style="display: inline-block; background: #d1fae5; color: #059669; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 1rem; border-radius: 20px; margin-bottom: 1rem;">Diabetes Tipo 2</span>
        <div style="font-size: 3rem; font-weight: 800; color: #064e3b; line-height: 1;">50</div>
        <div style="color: #10b981; font-size: 0.95rem; font-weight: 500; margin-bottom: 1rem;">tiras reagentes</div>
        <div style="background: #ecfdf5; color: #059669; padding: 0.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem;">A cada 30 dias</div>
        <div style="font-size: 0.85rem; color: #64748b;">Equivale a aproximadamente 1-2 medições por dia</div>
    </div>
</div>

<!-- Section 3: Important Info -->
<div class="glass-card" style="padding: 1.5rem;">
    <h2 style="font-size: 1.1rem; color: #0f172a; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
        Informações Importantes
    </h2>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">
        <div>
            <h3 style="font-size: 0.95rem; color: #1e293b; margin-bottom: 0.75rem;">Insumos fornecidos pelo SUS:</h3>
            <ul style="margin-left: 1.25rem; font-size: 0.9rem; color: #475569; line-height: 1.8;">
                <li>Glicosímetro (monitor de glicose)</li>
                <li>Tiras reagentes</li>
                <li>Lancetas (agulhas do lancetador)</li>
                <li>Lancetador (dispositivo de punção)</li>
            </ul>
        </div>
        <div>
            <h3 style="font-size: 0.95rem; color: #1e293b; margin-bottom: 0.75rem;">Cuidados com o monitor:</h3>
            <ul style="margin-left: 1.25rem; font-size: 0.9rem; color: #475569; line-height: 1.8;">
                <li>Manter em local seco e limpo</li>
                <li>Não expor a temperaturas extremas</li>
                <li>Verificar a validade das tiras</li>
                <li>Calibrar conforme orientação do fabricante</li>
            </ul>
        </div>
    </div>

    <div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 0.75rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" style="flex-shrink: 0; margin-top: 0.1rem;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
        <div style="font-size: 0.9rem; color: #1e3a8a; line-height: 1.5;">
            <strong>Renovação:</strong> O paciente deve retornar à Farmácia Municipal com a receita médica atualizada (válida por até 6 meses) para retirar as tiras reagentes dentro do período estipulado para o seu tipo de diabetes.
        </div>
    </div>

    <div style="background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" style="flex-shrink: 0; margin-top: 0.1rem;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
        <div style="font-size: 0.9rem; color: #92400e; line-height: 1.5;">
            <strong>Importante:</strong> As tiras reagentes devem ser armazenadas em sua embalagem original, em local seco, à temperatura ambiente. Após abrir o frasco, anotar a data de abertura e respeitar o prazo de validade indicado pelo fabricante.
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    document.getElementById('nav-glicose').classList.add('active');
</script>
{% endblock %}