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

@section('title', '403 - Acceso Prohibido')

@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;">403</h1>
                <h2 style="font-size: 36px; margin: 20px 0;">Acceso Prohibido</h2>
                <p style="font-size: 18px; color: #666; margin: 20px 0;">
                    No tienes permisos para acceder a esta página o realizar esta acción.
                </p>
                <p style="font-size: 16px; color: #999; margin: 20px 0;">
                    Si crees que esto es un error, por favor contacta al administrador.
                </p>
                <div style="margin: 40px 0;">
                    <a href="javascript:history.back()" class="button" style="background: #f77b71; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: inline-block;">
                        <i class="fa fa-arrow-left"></i> Volver Atrás
                    </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