<!--
Archivo: CotizEspCreacionExitosaMail.html
Ruta: src\templates\Emails\Ventas\Cotiz\CotizEspCreacionExitosaMail.html
Descripción: Plantilla de correo electrónico para confirmar la creación exitosa de un costeo.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cotización Especial Creada - IGSA</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333333;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border: 1px solid #e5e9ec;
        }
        .header {
            background-color: #059669;
            color: #ffffff;
            padding: 20px;
            text-align: center;
        }
        .header-title {
            font-size: 22px;
            font-weight: bold;
            margin: 10px 0 5px 0;
        }
        .header-subtitle {
            font-size: 14px;
            margin: 0;
        }
        .content {
            padding: 25px;
        }
        .success {
            border: 1px solid #bbf7d0;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 5px;
            background-color: #f0fdf4;
        }
        .success-icon {
            font-size: 26px;
            color: #16a34a;
        }
        .success-text {
            font-weight: bold;
            color: #166534;
            margin-top: 8px;
        }
        .section {
            margin-bottom: 25px;
            border-bottom: 1px solid #e5e9ec;
            padding-bottom: 20px;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 12px;
            border-left: 4px solid #1e3a8a;
            padding-left: 12px;
        }
        .data-row { border-bottom: 1px solid #f3f4f6; }
        .data-label {
            font-weight: bold;
            color: #374151;
            padding: 8px 12px;
            width: 40%;
        }
        .data-value {
            color: #1f2937;
            padding: 8px 12px;
        }
        .actions {
            border: 1px solid #dbeafe;
            background-color: #eff6ff;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
        .btn {
            background-color: #1e3a8a;
            color: #ffffff;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            margin-top: 10px;
        }
        .footer {
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
            padding: 20px;
            text-align: center;
            font-size: 12px;
            color: #6b7280;
        }
        .footer a {
            color: #1e3a8a;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" style="background-color: #f5f7fa; padding: 20px 0;">
                <table class="email-container" cellpadding="0" cellspacing="0" border="0">
                    
                    <!-- Header -->
                    <tr>
                        <td class="header">
                            <div class="header-title">✅ Tarea de cotización atendida</div>
                            <div class="header-subtitle">Confirmación del sistema IGSA Elephant</div>
                        </td>
                    </tr>
                    
                    <!-- Contenido -->
                    <tr>
                        <td class="content">

                            <!-- Mensaje de éxito -->

                            <!-- Datos principales -->
                            <div class="section">
                                <div class="section-title">📋 Detalles del Costeo</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label"># Oportunidad:</td>
                                        <td class="data-value"><strong>{{ CRM_OpportunityNumber }}</strong></td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label"># Costeo:</td>
                                        <td class="data-value"><strong>{{ CostingNum }}</strong></td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Tipo de Cotización:</td>
                                        <td class="data-value">{{ FrontES }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Fecha de Creación:</td>
                                        <td class="data-value">{{ CostingDate }}</td>
                                    </tr>
                                </table>
                            </div>

                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td class="footer">
                            <div style="margin-bottom: 8px;">
                                Para dudas y aclaraciones contactar 
                                <strong>a la persona responsable</strong> al correo 
                                <a href="mailto:{{ Email }}">{{ Email }}</a>
                            </div>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</body>
</html>
