<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>{{ $titulo }}</title>
    <style>
        body { font-family: DejaVu Sans, sans-serif; color: #1f2937; font-size: 12px; }
        .header { border-bottom: 2px solid #7a2e2e; margin-bottom: 20px; padding-bottom: 12px; }
        .title { color: #7a2e2e; font-size: 18px; font-weight: bold; margin-bottom: 6px; }
        .meta { margin-bottom: 18px; }
        .meta div { margin-bottom: 4px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #d1d5db; padding: 8px 10px; text-align: left; }
        th { background: #fff1f2; color: #7a2e2e; width: 34%; }
    </style>
</head>
<body>
    <div class="header">
        <table style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="width: 90px; vertical-align: top;">
                    @if(!empty($imagen))
                        <img src="{{ public_path('imagen_comprobante/' . $imagen) }}" alt="Logo sede" style="max-width: 80px; max-height: 100px;">
                    @endif
                </td>
                <td style="text-align: center;">
                    <div class="title">{{ $titulo }}</div>
                    <div>{{ $encabezado }}</div>
                    <div>{{ $direccion }}</div>
                </td>
            </tr>
        </table>
    </div>

    <div class="meta">
        <div><strong>Sede:</strong> {{ $sede }}</div>
        <div><strong>Fecha y hora:</strong> {{ $fecha_hora }}</div>
        <div><strong>Usuario:</strong> {{ $usuario }}</div>
        <div><strong>DNI:</strong> {{ $dni }}</div>
        <div><strong>Estado:</strong> {{ $estado }}</div>
    </div>

    <table>
        <tbody>
            @foreach($campos as $label => $value)
                <tr>
                    <th>{{ $label }}</th>
                    <td>{{ $value !== '' ? $value : '-' }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>
