<!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;
            max-width: 600px;
        }

        .header {
            /* background-color: #eeeeee; */
            padding: 20px;
            max-width: 600px;
            
        }
       
        .content {
            background-color: #fff;
            padding: 0px 20px;
            max-width: 600px;
        }
        
        .footer {
            background-color: #6345EC;
            /* padding: 0px 20px; */
            max-width: 600px;
            font-style: italic;
            color: #fff;
            margin: 0 20px 0 20px;
            text-align: center;
        }
        .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;
        }

        .parrafo{
            text-align: justify;
        }
        .tabla_datos {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            padding: 20px;
        }

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

        .tabla_datos .detalle {
            background-color: #eeeeee;
            text-align: right;
            font-weight: bold;
            width: 20%;
        }
    </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 confirmación de reserva</h3>
    </div>

    <!-- Contenido principal -->
    <div class="content">        
        <p>Estimados,</p>
        <p class="parrafo">Por medio de la presente, informamos que la empresa <b>{{ correoRazonSocial }}</b> 
            ha solicitado una reserva <b>{{ correoCargaPara }}</b> con el siguiente detalle:</p>
            <table  class="tabla_datos">
                <tbody>
                    <tr>
                        <td class="detalle">Fecha</td>
                        <td class="dato">{{ correoReservaFecha }}</td>
                    </tr>
                    <tr>
                        <td class="detalle">Horario</td>
                        <td>{{ correoReservaHorario }}</td>
                    </tr>
                    <tr>
                        <td class="detalle">Bodega</td>
                        <td>{{ correoReservaBodega }}</td>
                    </tr>
                    <tr>
                        <td class="detalle">Puerta</td>
                        <td>{{ correoReservaPuerta }}</td>
                    </tr>
                </tbody>
            </table>
            <p class="parrafo">Para poder gestionar esta reserva puede ingresar al 
            sistema de Agendamiento de <b>Sils Group</b>.
            </p>
            <!-- <p style="text-align: center;">
                {{ sistemaURL }}
            </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>