<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{-- No se consulta la base de datos aquí a propósito: un error 500 puede
         ser justamente un problema de conexión a la BD, y la página de error
         no debe depender de que la BD funcione para poder mostrarse. --}}
    <title>@yield('codigo') - {{ config('app.name', 'Sistema de Facturación') }}</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .card {
            width: 100%;
            max-width: 440px;
            background: #fff;
            border-radius: .75rem;
            box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
            padding: 2.5rem 2rem;
            text-align: center;
            margin: 1rem;
        }
        .codigo {
            font-size: 3rem;
            font-weight: 800;
            color: #4e73df;
            margin: 0;
        }
        .titulo {
            font-size: 1.15rem;
            font-weight: 700;
            color: #2f3040;
            margin: .5rem 0 .75rem;
        }
        .mensaje {
            color: #6c757d;
            font-size: .92rem;
            margin-bottom: 1.5rem;
        }
        .btn {
            display: inline-block;
            background: #4e73df;
            color: #fff;
            text-decoration: none;
            padding: .55rem 1.5rem;
            border-radius: .5rem;
            font-weight: 600;
            font-size: .9rem;
        }
        .btn:hover { background: #3d5fc7; }
    </style>
</head>
<body>
    <div class="card">
        <p class="codigo">@yield('codigo')</p>
        <p class="titulo">@yield('titulo')</p>
        <p class="mensaje">@yield('mensaje')</p>
        <a href="{{ url('/') }}" class="btn">Volver al inicio</a>
    </div>
</body>
</html>
