{% extends "emails/base_email.html" %}

{% block title %}Código de verificación{% endblock %}

{% block content %}
<p style="font-size: 15px; color: #4a4a4a; line-height: 1.6; margin: 0 0 24px 0; text-align: center;">
    Hola <strong style="color: #1a1a1a;">{{ first_name }}</strong>, bienvenid@ a Citalis. Usa el siguiente código para acceder a tu cuenta:
</p>

<div style="background-color: #f0f0d8; border-radius: 8px; margin: 0 0 20px 0;">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" style="padding: 20px;">
                <span style="font-size: 36px; font-weight: 900; color: #1693a5; letter-spacing: 6px;">{{ code }}</span>
            </td>
        </tr>
    </table>
</div>

<p style="font-size: 13px; color: #999999; text-align: center; margin: 0 0 28px 0;">
    Válido por <strong style="color: #4a4a4a;">10 minutos</strong>. Si no solicitaste este acceso, ignora este mensaje.
</p>

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td style="background-color: #1693a5; border-radius: 4px;">
                        <a href="https://citalis.app/verify/" style="display: block; padding: 12px 36px; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;">
                            Ir a mi cuenta →
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
{% endblock %}