<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Nueva Gestión Registrada</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f4f6f8;
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }

        .header {
            background-color: #2f6f73;
            color: #ffffff;
            padding: 20px;
            text-align: center;
        }

        .header h1 {
            margin: 0;
            font-size: 20px;
            font-weight: normal;
        }

        .content {
            padding: 24px;
        }

        .content p {
            margin: 0 0 12px;
            font-size: 14px;
            line-height: 1.5;
        }

        .info-box {
            background-color: #f1f4f6;
            border-left: 4px solid #2f6f73;
            padding: 16px;
            margin: 20px 0;
            font-size: 14px;
        }

        .info-box table {
            width: 100%;
            border-collapse: collapse;
        }

        .info-box td {
            padding: 6px 0;
            vertical-align: top;
        }

        .info-box td.label {
            font-weight: bold;
            width: 160px;
            color: #555;
        }

        .footer {
            background-color: #f4f6f8;
            padding: 16px;
            text-align: center;
            font-size: 12px;
            color: #777;
        }

        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            background-color: #ffc107;
            color: #333;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="header">
        <h1>Nueva gestión registrada</h1>
    </div>

    <div class="content">

        <p>Estimado/a,</p>

        <p>
            Se ha creado una <strong>gestión </strong> asociada a una respuesta dentro del sistema.
        </p>

        <div class="info-box">
            <table>
                <tr>
                    <td class="label">ID Respuesta:</td>
                    <td><?= esc($respuesta_id) ?></td>
                </tr>
                <tr>
                    <td class="label">Tipo de gestión:</td>
                    <td><?= esc($tipo) ?></td>
                </tr>
                <tr>
                    <td class="label">Estado:</td>
                    <td>
                        <span class="badge"><?= esc($estado) ?></span>
                    </td>
                </tr>
                <tr>
                    <td class="label">Fecha creación:</td>
                    <td><?= esc($fecha_creacion) ?></td>
                </tr>
                <tr>
                    <td class="label">Usuario creador:</td>
                    <td><?= esc($usuario_creador) ?></td>
                </tr>
                <tr>
                    <td class="label">Usuario asignado:</td>
                    <td><?= esc($usuario_asignado) ?></td>
                </tr>
            </table>
        </div>

        <p><strong>Comentario:</strong></p>
        <p>
            <?= esc($comentarios) ?>
        </p>

        <p>
            Por favor, ingrese al sistema para revisar y gestionar esta asignación.
        </p>

    </div>

    <div class="footer">
        <p>
            Este es un mensaje automático.  
            <br>
            No responda este correo.
        </p>
    </div>

</div>

</body>
</html>
