S-A-R-A-PROYECT · ramirosoler · Oct 2, 2025
diff --git a/public/img/error401.png b/public/img/error401.png
diff --git a/public/img/error402.png b/public/img/error402.png
diff --git a/public/img/error403.png b/public/img/error403.png
diff --git a/public/img/error404.png b/public/img/error404.png
diff --git a/public/img/error419.png b/public/img/error419.png
diff --git a/public/img/error429.png b/public/img/error429.png
diff --git a/public/img/error500.png b/public/img/error500.png
diff --git a/public/img/error503.png b/public/img/error503.png
diff --git a/resources/views/errors/401.blade.php b/resources/views/errors/401.blade.php
@@ -1,5 +1,41 @@
-@extends('errors::minimal')
+@extends('templates.general')
+
+@section('content')
+
+<body class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        🚪 ¡Alto ahí! No tienes permiso para entrar
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        Parece que intentaste abrir una puerta cerrada.  
+        Para acceder aquí necesitas iniciar sesión o contar con la autorización adecuada.  
+        <br>Tranquilo, <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span> cuida muy bien sus espacios. 😉
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ url('/') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+
+    <div class="fixed bottom-0 left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('img/error401.png') }}" 
+             alt="Imagen de acceso denegado por S.A.R.A." 
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+
+</body>
+@endsection
+
 
-@section('title', __('Unauthorized'))
-@section('code', '401')
-@section('message', __('Unauthorized'))
diff --git a/resources/views/errors/402.blade.php b/resources/views/errors/402.blade.php
@@ -3,3 +3,38 @@
 @section('title', __('Payment Required'))
 @section('code', '402')
 @section('message', __('Payment Required'))
+
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#E63946] mb-6 z-10 text-center">
+        💳 ¡Oops! No tienes saldo en S.A.R.A.
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        Parece que tu <span class="font-semibold text-[#E63946]">cupo de alimentación</span> no está disponible o requiere activación.  
+        <br><span class="italic">Verifica tu estado en el sistema o contacta al administrador.</span>
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#E63946] text-white font-semibold rounded-lg shadow-md hover:bg-[#c52f3b] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+    <!-- Imagen ilustrativa -->
+    <div class="left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('img/error402.png') }}" 
+             alt="Estudiante sin saldo en S.A.R.A."
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+</div>
+@endsection
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
@@ -1,31 +1,38 @@
 @extends('templates.general')
 
 @section('content')
-<div
-    class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-20 sm:pb-28 md:pb-36 lg:pb-44 space-y-6">
+
+    <!-- Logo superior -->
     <div class="mb-8 z-10">
-        <img src="{{asset('img/logo_sara-amarillo.png')}}" alt="Logo oficial de S.A.R.A." class="w-80 mx-auto">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
     </div>
 
-
-    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">¡Oops, aquí no hay comida ni página!
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        ❌ ¡Oops! Página no encontrada
     </h1>
 
     <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
-        Buscamos por todos lados pero no pudimos encontrar lo que buscas.
-        Parece que hasta <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span> se quedó confundida.
+        Buscamos por todos lados pero no pudimos encontrar lo que buscas.  
+        Parece que hasta <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span> se quedó confundida.  
+        <br><span class="italic">Tal vez la página fue movida o nunca existió...</span>
     </p>
 
-
-    <a href="{{route('home')}}"
-        class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10">
         Volver al inicio
     </a>
 
-    <!-- ImagenES EDITABLES EN  CANVA-->
-    <div class="left-1/2 transform -translate-x-1/2">
-        <img src="{{asset('img/persons/404.png')}}" alt="Imagen cómica de S.A.R.A. confundida"
-            class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    <!-- Imagen ilustrativa -->
+    <div class="z-10">
+        <img src="{{ asset('img/error404.png') }}" 
+             alt="Imagen cómica de S.A.R.A. confundida"
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
     </div>
 </div>
 

diff --git a/resources/views/errors/419.blade.php b/resources/views/errors/419.blade.php
@@ -1,5 +1,40 @@
 @extends('errors::minimal')
 
-@section('title', __('Page Expired'))
+@section('title', __('Página expirada'))
 @section('code', '419')
-@section('message', __('Page Expired'))
+@section('message', __('La sesión ha expirado'))
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        ⏳ ¡Ups! La página ha expirado
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        Parece que tu sesión se tomó un descanso más largo de lo debido.  
+        Para seguir usando <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span>, necesitas actualizar la página o volver a iniciar sesión.  
+        <br><span class="italic">No te preocupes, todo sigue bajo control.</span>
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+    <!-- Imagen ilustrativa -->
+    <div class="left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('img/error419.png') }}" 
+             alt="Imagen de S.A.R.A. esperando pacientemente"
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+</div>
+@endsection
diff --git a/resources/views/errors/429.blade.php b/resources/views/errors/429.blade.php
@@ -3,3 +3,46 @@
 @section('title', __('Too Many Requests'))
 @section('code', '429')
 @section('message', __('Too Many Requests'))
+@extends('errors::minimal')
+
+
+@extends('errors::minimal')
+
+@section('title', __('Demasiadas solicitudes'))
+@section('code', '429')
+@section('message', __('Demasiadas solicitudes'))
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        💤 ¡Oops! S.A.R.A. necesita un respiro
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        Has hecho demasiadas solicitudes en muy poco tiempo.  
+        <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span> está tomando un descanso para recuperar energías.  
+        <br><span class="italic">Inténtalo de nuevo en unos segundos.</span>
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+    <!-- Imagen ilustrativa -->
+    <div class="left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('errors/img/error429.png') }}" 
+             alt="Imagen cómica de S.A.R.A. descansando"
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+</div>
+@endsection
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
@@ -3,3 +3,44 @@
 @section('title', __('Server Error'))
 @section('code', '500')
 @section('message', __('Server Error'))
+
+@extends('errors::minimal')
+
+@section('title', __('Error del servidor'))
+@section('code', '500')
+@section('message', __('Error interno del servidor'))
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        ⚠️ ¡Ups! Algo salió mal en la cocina de S.A.R.A.
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        Parece que se nos quemó una receta interna del sistema 🍳🔥.  
+        No te preocupes, nuestro equipo ya está revisando el problema.  
+        <br><span class="italic">Intenta de nuevo más tarde, S.A.R.A. estará lista para servirte.</span>
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+    <!-- Imagen ilustrativa -->
+    <div class="left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('img/error500.png') }}" 
+             alt="Imagen cómica de S.A.R.A. arreglando un problema"
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+</div>
+@endsection
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
@@ -3,3 +3,38 @@
 @section('title', __('Service Unavailable'))
 @section('code', '503')
 @section('message', __('Service Unavailable'))
+
+<div class="bg-gray-50 text-gray-800 flex flex-col items-center justify-center min-h-screen relative pb-40 sm:pb-48 md:pb-56 lg:pb-64">
+
+    <!-- Logo superior -->
+    <div class="mb-8 z-10">
+        <img src="{{ asset('img/logo_sara-amarillo.png') }}" 
+             alt="Logo oficial de S.A.R.A." 
+             class="w-80 mx-auto">
+    </div>
+
+    <!-- Mensaje principal -->
+    <h1 class="text-4xl sm:text-5xl font-bold text-[#F2AC2A] mb-6 z-10 text-center">
+        🛠️ ¡Oops! La cocina de S.A.R.A. está en mantenimiento
+    </h1>
+
+    <p class="text-base sm:text-lg text-gray-600 max-w-xl text-center mb-8 z-10 px-4">
+        En este momento el servicio no está disponible.  
+        Puede que <span class="font-semibold text-[#F2AC2A]">S.A.R.A.</span> esté recargando energía o en mantenimiento.  
+        <br><span class="italic">Vuelve a intentarlo en unos minutos, pronto estará lista para servirte.</span>
+    </p>
+
+    <!-- Botón volver -->
+    <a href="{{ route('home') }}"
+       class="px-6 py-3 bg-[#F2AC2A] text-white font-semibold rounded-lg shadow-md hover:bg-[#d89115] transition z-10 mb-12">
+       Volver al inicio
+    </a>
+
+    <!-- Imagen ilustrativa -->
+    <div class="left-1/2 transform -translate-x-1/2">
+        <img src="{{ asset('img/error503.png}" 
+             alt="Imagen cómica de S.A.R.A. en mantenimiento"
+             class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-xl xl:max-w-2xl mx-auto">
+    </div>
+</div>
+@endsection
diff --git a/resources/views/teachers/auditoria.blade.php b/resources/views/teachers/auditoria.blade.php
@@ -0,0 +1,66 @@
+@extends('templates.teachers')
+
+@section('content')
+<div class="p-6 max-w-7xl mx-auto">
+
+  <!-- Header -->
+  <header class="flex justify-between items-center mb-6">
+    <h1 class="text-3xl font-bold text-[#F2AC2A]">Registro de auditoría</h1>
+    <input type="text" placeholder="Buscar..." 
+      class="border rounded-lg px-3 py-1 text-sm focus:ring-2 focus:ring-[#F2AC2A] outline-none">
+  </header>
+
+  <!-- Tabla -->
+  <div class="bg-white rounded-2xl shadow overflow-hidden">
+    <table class="w-full text-left border-collapse">
+      <thead>
+        <tr class="bg-gray-100 text-gray-700 text-sm">
+          <th class="px-4 py-2 cursor-pointer">Timestamp</th>
+          <th class="px-4 py-2">Tipo</th>
+          <th class="px-4 py-2">Mensaje</th>
+          <th class="px-4 py-2">Fecha</th>
+          <th class="px-4 py-2">Código</th>
+        </tr>
+      </thead>
+      <tbody class="text-sm">
+        <tr class="border-b hover:bg-gray-50 transition">
+          <td class="px-4 py-2">2025-09-30 21:45:01</td>
+          <td class="px-4 py-2">WEB</td>
+          <td class="px-4 py-2">Usuario inició sesión</td>
+          <td class="px-4 py-2">30/09/2025</td>
+          <td class="px-4 py-2">
+            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">200</span>
+          </td>
+        </tr>
+        <tr class="border-b hover:bg-gray-50 transition">
+          <td class="px-4 py-2">2025-09-30 21:47:22</td>
+          <td class="px-4 py-2">API</td>
+          <td class="px-4 py-2">Petición no encontrada</td>
+          <td class="px-4 py-2">30/09/2025</td>
+          <td class="px-4 py-2">
+            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">404</span>
+          </td>
+        </tr>
+        <tr class="border-b hover:bg-gray-50 transition">
+          <td class="px-4 py-2">2025-09-30 21:50:10</td>
+          <td class="px-4 py-2">DISPOSITIVO</td>
+          <td class="px-4 py-2">Error al enviar datos del ESP32</td>
+          <td class="px-4 py-2">30/09/2025</td>
+          <td class="px-4 py-2">
+            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">500</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Paginación -->
+  <div class="flex justify-center items-center gap-2 mt-4">
+    <button class="px-3 py-1 rounded-lg bg-gray-200 hover:bg-gray-300 text-sm">Anterior</button>
+    <button class="px-3 py-1 rounded-lg bg-[#F2AC2A] text-white text-sm">1</button>
+    <button class="px-3 py-1 rounded-lg bg-gray-200 hover:bg-gray-300 text-sm">2</button>
+    <button class="px-3 py-1 rounded-lg bg-gray-200 hover:bg-gray-300 text-sm">3</button>
+    <button class="px-3 py-1 rounded-lg bg-gray-200 hover:bg-gray-300 text-sm">Siguiente</button>
+  </div>
+</div>
+@endsection
diff --git a/resources/views/teachers/configuracion.perdil.blade.php b/resources/views/teachers/configuracion.perdil.blade.php
diff --git a/routes/web.php b/routes/web.php
@@ -139,6 +139,16 @@
 
 /////////////////////////////////////////////////////////////////////////////////////////////////////
 
+Route::prefix('error')->group(function () {
+    Route::view('/401', 'errors.401')->name('error.401');
+    Route::view('/403', 'errors.403')->name('error.403');
+    Route::view('/404', 'errors.404')->name('error.404');
+    Route::view('/419', 'errors.419')->name('error.419');
+    Route::view('/429', 'errors.429')->name('error.429');
+    Route::view('/500', 'errors.500')->name('error.500');
+    Route::view('/503', 'errors.503')->name('error.503');
+});
+
 Route::middleware(['auth'])->group(function () {
     Route::redirect('settings', 'settings/profile');