<!DOCTYPE html>
<html>

<head>
    <title>{{ correoTitulo }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #444444;
        }

        .header {
            /* background-color: #eeeeee; */
            padding: 20px;
            max-width: 600px;
            
        }
       
        .content {
            background-color: #fff;
            padding: 20px;
            max-width: 600px;
        }
        
        .footer {
            background-color: #6345EC;
            padding: 0px;
            max-width: 600px;
            font-style: italic;
            color: #fff;
        }
        .titulo {
            background-color: #6345EC;
            padding: 0px;
            max-width: 600px;
            color: #fff;
            text-align: center;
            margin-bottom: 0;
        }

        .logo {
            max-width: 200px;
            height: auto;
            margin: 0 auto;
            display: block;
        }

        .tabla_datos {
            width: 600px;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .tabla_datos th,
        .tabla_datos td {
            padding: 10px;
            border: 1px solid #cccccc;
            text-align: left;
        }

        .tabla_datos th {
            background-color: #eeeeee;
        }
    </style>
</head>

<body>
    <!-- Cabecera -->
    <div class="header">
        <img src="https://yoaporto.cl/assets/images/logo_sils.png" alt="Logo de la empresa" class="logo">
        <h3 class="titulo">Solicitud de Inscripcion</h3>
    </div>

    <!-- Contenido principal -->
    <div class="content">        
        <p>Hola {{ correoNombre }},</p>
        <p>Este es un correo electrónico de ejemplo que contiene algunos datos dinámicos:</p>

        <!-- Tabla con datos dinámicos -->        
        <tr>
            <td colspan="3" align="justify">
                Por medio del presente, le comunicamos que su solicitud de agendamiento fue confirmada con el 
                siguiente detalle:
            </td>
        </tr>
        <tr>
            <td>
            <table  class="tabla_datos">
                <thead>
                    <tr>
                        <th>Dato</th>
                        <th>Valor</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Nombre</td>
                        <td>{{ correoNombre }}</td>
                    </tr>
                    <tr>
                        <td>Edad</td>
                        <td>{{ correoEdad }}</td>
                    </tr>
                    <tr>
                        <td>Correo electrónico</td>
                        <td>{{ correoCorreo }}</td>
                    </tr>
                </tbody>
            </table>
        </td>
        </tr>
        <p>Gracias por utilizar nuestro servicio,</p>
        <p>El equipo de ejemplo</p>
    </div>

    <!-- Pie de página -->
    <div class="footer">
        <p>Este correo electrónico fue enviado automáticamente. Por favor, no responder.</p>
    </div>
</body>

</html>