@extends(theme_view('layouts.app'))

@section('title', '503 - Servicio No Disponible')

@section('content')
<div class="main-container col1-layout">
    <div class="main container">
        <div class="col-main">
            <div class="error-page" style="text-align: center; padding: 100px 20px;">
                <h1 style="font-size: 120px; color: #f77b71; margin: 0;">503</h1>
                <h2 style="font-size: 36px; margin: 20px 0;">Servicio No Disponible</h2>
                <p style="font-size: 18px; color: #666; margin: 20px 0;">
                    El sistema está temporalmente en mantenimiento.
                </p>
                <p style="font-size: 16px; color: #999; margin: 20px 0;">
                    Estaremos de vuelta pronto. Gracias por tu paciencia.
                </p>
                <div style="margin: 40px 0;">
                    <a href="javascript:location.reload()" class="button" style="background: #f77b71; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: inline-block;">
                        <i class="fa fa-refresh"></i> Intentar Nuevamente
                    </a>
                    <a href="{{ route('front.home') }}" class="button" style="background: #333; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: inline-block; margin-left: 10px;">
                        <i class="fa fa-home"></i> Volver al Inicio
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection