<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmación de Asistencia</title>
    <!--[if mso]>
    <style type="text/css">
        body, table, td, a { font-family: Arial, sans-serif !important; }
    </style>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f8f6f2; font-family: Arial, sans-serif;">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f6f2;">
        <tr>
            <td align="center" style="padding: 40px 20px;">
                <!-- Contenedor principal -->
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                    
                    <!-- Línea gráfica -->
                    <tr>
                        <td style="padding: 0; background: linear-gradient(90deg, #1a5276 0%, #00abb6 100%); height: 6px;">
                        </td>
                    </tr>
                    
                    <!-- Logo (imagen principal) - sin textos -->
                    <tr>
                        <td align="center" style="padding: 40px 30px 20px; background-color: #ffffff;">
                            <img src="{{IMAGEN_PRINCIPAL}}" alt="Logo" style="max-width: 200px; max-height: 120px; height: auto; border-radius: 4px; display: block;" width="200">
                        </td>
                    </tr>
                    
                    <!-- Nombre del evento -->
                    <tr>
                        <td align="center" style="padding: 0 30px 15px; background-color: #ffffff;">
                            <h1 style="margin: 0; padding: 0; font-size: 24px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif;">
                                {{NOMBRES_NOVIOS}}
                            </h1>
                            <div style="width: 40px; height: 2px; background-color: #00abb6; margin: 12px auto 0;"></div>
                        </td>
                    </tr>
                    
                    <!-- Icono de confirmación -->
                    <tr>
                        <td align="center" style="padding: 15px 30px; background-color: #ffffff;">
                            <div style="width: 70px; height: 70px; background-color: #00abb6; border-radius: 50%; display: inline-block; line-height: 70px; text-align: center;">
                                <span style="font-size: 36px; color: #ffffff;">✓</span>
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Agradecimiento -->
                    <tr>
                        <td align="center" style="padding: 0 30px 25px; background-color: #ffffff;">
                            <h2 style="margin: 0 0 12px; padding: 0; font-size: 24px; font-weight: 600; color: #00abb6; font-family: Arial, sans-serif;">
                                ¡Gracias por confirmar tu asistencia!
                            </h2>
                            <p style="margin: 0 0 8px; padding: 0; font-size: 16px; line-height: 1.5; color: #333333; font-family: Arial, sans-serif;">
                                Estimado(a) <strong style="color: #1a5276;">{{NOMBRE_INVITADO}}</strong>
                            </p>
                            <p style="margin: 0 0 20px; padding: 0; font-size: 15px; line-height: 1.5; color: #555555; font-family: Arial, sans-serif;">
                                Hemos recibido tu confirmación. ¡Nos complace contar con tu presencia!
                            </p>
                        </td>
                    </tr>
                    
                    <!-- Información del evento -->
                    <tr>
                        <td align="center" style="padding: 0 30px 25px; background-color: #ffffff;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f0fafa; border-radius: 8px; border: 1px solid #b8e8eb;">
                                <tr>
                                    <td align="center" style="padding: 25px;">
                                        <p style="margin: 0 0 5px; padding: 0; font-size: 12px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.5px;">
                                            Te esperamos el
                                        </p>
                                        <p style="margin: 0 0 8px; padding: 0; font-size: 20px; font-weight: 600; color: #333333; font-family: Arial, sans-serif;">
                                            {{FECHA_EVENTO}}
                                        </p>
                                        <p style="margin: 0 0 12px; padding: 0; font-size: 16px; color: #555555; font-family: Arial, sans-serif;">
                                            a las <strong style="color: #333333;">{{HORA_EVENTO}}</strong>
                                        </p>
                                        <p style="margin: 0; padding: 0; font-size: 15px; color: #555555; font-family: Arial, sans-serif;">
                                            {{LUGAR_EVENTO}}
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Detalle de invitados -->
                    <tr>
                        <td style="padding: 0 30px 25px; background-color: #ffffff;">
                            <h3 style="margin: 0 0 15px; padding: 0; font-size: 18px; font-weight: 600; color: #333333; font-family: Arial, sans-serif;">
                                Detalle de tu Invitación
                            </h3>
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden;">
                                <thead>
                                    <tr style="background-color: #f8f9fa;">
                                        <th style="padding: 12px; text-align: left; font-size: 13px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; border-bottom: 2px solid #e0e0e0;">
                                            Nombre
                                        </th>
                                        <th style="padding: 12px; text-align: left; font-size: 13px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; border-bottom: 2px solid #e0e0e0;">
                                            Tipo
                                        </th>
                                        <th style="padding: 12px; text-align: left; font-size: 13px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; border-bottom: 2px solid #e0e0e0;">
                                            Estado
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{TABLA_INVITADOS}}
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Botón ver invitación -->
                    <tr>
                        <td align="center" style="padding: 0 30px 30px; background-color: #ffffff;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
                                <tr>
                                    <td align="center" style="background-color: #1a5276; border-radius: 6px;">
                                        <a href="{{LINK_INVITACION}}" style="display: inline-block; padding: 12px 36px; font-size: 15px; font-weight: 600; color: #ffffff !important; text-decoration: none; font-family: Arial, sans-serif;">
                                            Ver Mi Invitación
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    {{SECCION_WHATSAPP}}
                    
                    <!-- Footer -->
                    <tr>
                        <td align="center" style="padding: 30px; background: linear-gradient(90deg, #1a5276 0%, #00abb6 100%);">
                            <p style="margin: 0; padding: 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); font-family: Arial, sans-serif;">
                                {{NOMBRES_NOVIOS}}
                            </p>
                            <p style="margin: 15px 0 0; padding: 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); font-family: Arial, sans-serif;">
                                {{YEAR}} · Evento Institucional
                            </p>
                            <p style="margin: 12px 0 0; padding: 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); font-family: Arial, sans-serif;">
                                Invitaciones Digitales por 
                                <a href="https://ritmocreativo.com" style="color: #ffffff; text-decoration: underline; font-weight: 500;">Ritmo Creativo Ec</a>
                            </p>
                        </td>
                    </tr>
                    
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
