<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Sin conexión · AsignaPro</title>
    <x-pwa-meta theme-color="#07377f" />
    <style>
        :root {
            color-scheme: light;
            --ink: #0f172a;
            --muted: #64748b;
            --brand: #07377f;
            --paper: #ffffff;
            --soft: #f3f6fb;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100dvh;
            display: grid;
            place-items: center;
            padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, .12), transparent 32rem),
                linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
        }
        .offline-card {
            width: min(100%, 27rem);
            padding: 2rem;
            border: 1px solid rgba(226, 232, 240, .95);
            border-radius: 2rem;
            background: rgba(255, 255, 255, .94);
            box-shadow: 0 28px 80px rgba(15, 23, 42, .14);
            text-align: center;
        }
        .offline-logo {
            width: 5.5rem;
            height: 5.5rem;
            margin: 0 auto 1.25rem;
            display: grid;
            place-items: center;
            border-radius: 1.75rem;
            background: #f8fafc;
            box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .9);
        }
        .offline-logo img { width: 4rem; height: 4rem; object-fit: contain; }
        h1 {
            margin: 0;
            font-size: clamp(1.65rem, 7vw, 2.2rem);
            line-height: 1.05;
            letter-spacing: -.02em;
        }
        p {
            margin: .85rem auto 0;
            max-width: 21rem;
            color: var(--muted);
            line-height: 1.55;
        }
        .actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: .75rem;
            margin-top: 1.5rem;
        }
        button, a {
            min-height: 3rem;
            border: 0;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 1.25rem;
            font: inherit;
            font-weight: 900;
            text-decoration: none;
            cursor: pointer;
        }
        button { background: var(--ink); color: white; }
        a { background: var(--soft); color: var(--ink); }
    </style>
</head>
<body>
    <main class="offline-card">
        <div class="offline-logo">
            <img src="{{ asset('assets/brand/loading-logo.png') }}" alt="AsignaPro">
        </div>
        <h1>Estás sin conexión</h1>
        <p>AsignaPro no pudo contactar el servidor. Revisa tu internet y vuelve a intentarlo; tus datos seguros no se mostrarán desde caché sensible.</p>
        <div class="actions">
            <button type="button" onclick="window.location.reload()">Reintentar</button>
            <a href="/empresa/dashboard">Volver al inicio</a>
        </div>
    </main>
</body>
</html>
