@extends('layout.error')

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

@section('content')
<div class="card border-danger shadow-lg">
    <div class="card-header card-icatep-rojo2">
        <h4 class="mb-0 text-white">
            <i class="bx bx-block"></i> Error 403 - Acceso denegado
        </h4>
    </div>
    <div class="card-body text-center py-5">
        <div class="mb-4">
            <i class="bx bx-shield-x text-icatep-rojo2" style="font-size: 100px;"></i>
        </div>
        
        <h1 class="display-1 text-icatep-rojo2 fw-bold">403</h1>
        <h3 class="text-icatep-rojo2 mb-3">No tienes permiso para acceder</h3>
        
        <p class="text-muted mb-4">
            No cuentas con los permisos necesarios para acceder a esta página o recurso.
        </p>

        <div class="alert alert-light border mb-4" role="alert">
            <small class="text-muted">
                <strong>Razones comunes:</strong>
                <ul class="text-start mt-2 mb-0">
                    <li>Tu rol de usuario no tiene acceso a este módulo</li>
                    <li>No perteneces a la unidad correspondiente</li>
                    <li>Intentas acceder a información de otro usuario</li>
                    <li>Los permisos han sido actualizados recientemente</li>
                </ul>
            </small>
        </div>

        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="javascript:window.top.location.reload()" class="btn btn-icatep-rojo1">
                <i class="bx bx-refresh"></i> Reintentar
            </a>
            
            <a href="{{ route('dashboard') }}" class="btn btn-icatep-verde2" target="_top">
                <i class="bx bx-home"></i> Ir al inicio
            </a>
        </div>
    </div>
    <div class="card-footer text-center bg-light">
        <small class="text-muted">
            <i class="bx bx-help-circle"></i> Si crees que deberías tener acceso, contacta al administrador del sistema
        </small>
    </div>
</div>
@endsection