<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Instalación — Sistema de Facturación</title>

    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <style>
        body.instalador-bg {
            min-height: 100vh;
            background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }
        .instalador-card {
            width: 100%;
            max-width: 560px;
            background: #fff;
            border-radius: .75rem;
            box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
            padding: 2rem;
        }
        .instalador-brand {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .instalador-pasos {
            display: flex;
            justify-content: center;
            gap: .4rem;
            margin-bottom: 1.5rem;
        }
        .instalador-pasos .paso {
            width: 2rem; height: 2rem;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .8rem; font-weight: 700;
            background: #e9ecef; color: #6c757d;
        }
        .instalador-pasos .paso.activo { background: #4e73df; color: #fff; }
        .instalador-pasos .paso.hecho { background: #198754; color: #fff; }
    </style>
</head>
<body class="instalador-bg">
    <div class="instalador-card">
        <div class="instalador-brand">
            <h1 class="h4 mb-0">Instalación del sistema</h1>
            <p class="text-muted small mb-0">Sistema de Facturación</p>
        </div>

        @isset($paso)
            <div class="instalador-pasos">
                @foreach (['Requisitos', 'Base de datos', 'Migración', 'Administrador', 'Listo'] as $i => $nombre)
                    <div class="paso {{ $i + 1 === $paso ? 'activo' : ($i + 1 < $paso ? 'hecho' : '') }}" title="{{ $nombre }}">
                        {{ $i + 1 }}
                    </div>
                @endforeach
            </div>
        @endisset

        @yield('content')
    </div>
</body>
</html>
