alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEW:

Browse Source 
- Creada sidebar para mejora visual.
- Removidos excesos de links.
- Modificado el footer para consistencia de estilos.
This commit is contained in:
Bryam105
2026-06-02 11:53:29 -03:00
parent 957f8f5bf0
commit cc44c2e8aa
9 changed files with 426 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/footer.blade.php
+6 -4
View File
@@ -1,13 +1,15 @@
<footer class="bg-slate-100 dark:bg-neutral-900 border-t border-black/5 dark:border-white/5 mt-auto z-10 w-full">
<div class="w-full max-w-7xl mx-auto p-8">
<div class="sm:flex sm:items-center sm:justify-between">
<a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
<svg class="h-8 text-lime-600 dark:text-neon-lime" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z"/></svg>
<a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse group grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
<div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="self-center text-xl font-bold whitespace-nowrap dark:text-white">Cicles Lauck</span>
</a>
<ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0">
<li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte</a></li>
<li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
<li><a href="{{ route('faq') }}" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte y FAQ</a></li>
<li><a href="{{ route('faq') }}#contact" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
</ul>
</div>
<hr class="my-6 border-neutral-200 dark:border-neutral-800 sm:mx-auto lg:my-8">
resources/views/components/layout.blade.php
+33 -2
View File
@@ -34,6 +34,9 @@
<!-- Navbar Component -->
<x-navbar />
<!-- Sidebar Component -->
<x-sidebar />
<!-- Contenido Principal -->
<main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
{{ $slot }}
@@ -47,14 +50,42 @@
<!-- Scripts globales -->
<script>
// Lógica del menú móvil
// Lógica del menú móvil tradicional (navbar)
const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
const menu = document.getElementById('navbar-default');
if(btn && menu) {
btn.addEventListener('click', () => menu.classList.toggle('hidden'));
}
// Lógica del Sidebar
const sidebar = document.getElementById('main-sidebar');
const backdrop = document.getElementById('sidebar-backdrop');
const openSidebarBtns = document.querySelectorAll('.open-sidebar-btn');
const closeSidebarBtn = document.getElementById('close-sidebar-btn');
function toggleSidebar() {
sidebar.classList.toggle('-translate-x-full');
backdrop.classList.toggle('hidden');
// Pequeño delay para la transición de opacidad
setTimeout(() => {
backdrop.classList.toggle('opacity-0');
}, 10);
// Prevenir scroll en el body cuando el sidebar está abierto
document.body.classList.toggle('overflow-hidden');
}
openSidebarBtns.forEach(btn => {
btn.addEventListener('click', toggleSidebar);
});
if (closeSidebarBtn) {
closeSidebarBtn.addEventListener('click', toggleSidebar);
}
if (backdrop) {
backdrop.addEventListener('click', toggleSidebar);
}
</script>
@stack('scripts')
resources/views/components/navbar.blade.php
+22 -44
View File
@@ -1,20 +1,28 @@
<nav class="bg-slate-100/90 dark:bg-neutral-900/90 backdrop-blur-md border-b border-black/10 dark:border-white/10 w-full z-50 sticky top-0">
<div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
<!-- Logo -->
@auth
<a href="{{ route('dashboard') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
@endauth
@guest
<a href="{{ url('/') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
@endguest
<div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="self-center text-2xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
</span>
</a>
<div class="flex items-center gap-3">
<!-- Sidebar Toggle Button -->
<button type="button" class="open-sidebar-btn inline-flex items-center p-2 justify-center text-neutral-500 dark:text-neutral-400 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime transition-colors">
<span class="sr-only">Abrir menú lateral</span>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Logo -->
@auth
<a href="{{ route('dashboard') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
@endauth
@guest
<a href="{{ url('/') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
@endguest
<div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="self-center text-2xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
</span>
</a>
</div>
<!-- Mobile Menu Button -->
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-gray-400 rounded-lg md:hidden hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime" aria-controls="navbar-default" aria-expanded="false">
@@ -35,36 +43,6 @@
Inicio
</a>
</li>
<li>
<a href="{{ url('/productos') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('productos*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Stock
</a>
</li>
<li>
<a href="{{ route('tags.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('tags*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Etiquetas
</a>
</li>
<li>
<a href="{{ route('taller.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('taller*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Taller
</a>
</li>
<li>
<a href="{{ route('sales.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('sales*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Ventas
</a>
</li>
<li>
<a href="{{ route('faq') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->routeIs('faq') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Ayuda/FAQ
</a>
</li>
@endauth
resources/views/components/sidebar-link.blade.php
+51
View File
@@ -0,0 +1,51 @@
@props(['active' => false, 'icon' => 'default'])
@php
$classes = $active
? 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-bold text-lime-700 dark:text-neon-lime bg-lime-50 dark:bg-neon-lime/10 transition-colors'
: 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-medium text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors';
@endphp
<a {{ $attributes->merge(['class' => $classes]) }}>
@switch($icon)
@case('home')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
@break
@case('catalog')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
@break
@case('sales')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@break
@case('workshop')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
@break
@case('stock')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
@break
@case('tag')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
@break
@case('users')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
@break
@case('truck')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path></svg>
@break
@case('receipt')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
@break
@case('chart')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
@break
@case('database')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
@break
@case('question')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@break
@default
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
@endswitch
<span>{{ $slot }}</span>
</a>
resources/views/components/sidebar.blade.php
+117
View File
@@ -0,0 +1,117 @@
<!-- Overlay / Backdrop -->
<div id="sidebar-backdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden transition-opacity duration-300 opacity-0 cursor-pointer"></div>
<!-- Sidebar Container -->
<aside id="main-sidebar" class="fixed top-0 left-0 z-[70] h-screen w-72 bg-neutral-100 dark:bg-neutral-900 border-r border-neutral-300 dark:border-neutral-800 shadow-2xl transition-transform duration-300 -translate-x-full flex flex-col">
<!-- Sidebar Header -->
<div class="flex items-center justify-between p-4 border-b border-neutral-300 dark:border-neutral-800">
<a href="{{ url('/') }}" class="flex items-center space-x-2 group">
<div class="h-8 w-8 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-5 h-5 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="text-xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
</span>
</a>
<button id="close-sidebar-btn" class="p-2 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-neon-lime">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Sidebar Links (Scrollable area) -->
<div class="flex-1 overflow-y-auto py-4 px-3 space-y-1 scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700">
@auth
<x-sidebar-link href="{{ url('/dashboard') }}" :active="request()->is('dashboard')" icon="home">
Inicio
</x-sidebar-link>
@endauth
<x-sidebar-link href="{{ url('/catalogo') }}" :active="request()->is('catalogo*')" icon="catalog">
Catálogo
</x-sidebar-link>
@auth
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Gestión</p>
</div>
<x-sidebar-link href="{{ url('/sales') }}" :active="request()->is('sales*')" icon="sales">
Ventas
</x-sidebar-link>
<x-sidebar-link href="{{ url('/taller') }}" :active="request()->is('taller*')" icon="workshop">
Taller
</x-sidebar-link>
<x-sidebar-link href="{{ url('/productos') }}" :active="request()->is('productos*')" icon="stock">
Stock
</x-sidebar-link>
<x-sidebar-link href="{{ route('tags.index') }}" :active="request()->is('tags*')" icon="tag">
Etiquetas
</x-sidebar-link>
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Administración</p>
</div>
<x-sidebar-link href="{{ url('/clients') }}" :active="request()->is('clients*')" icon="users">
Clientes
</x-sidebar-link>
<x-sidebar-link href="{{ url('/suppliers') }}" :active="request()->is('suppliers*')" icon="truck">
Proveedores
</x-sidebar-link>
<x-sidebar-link href="{{ route('expenses.index') }}" :active="request()->routeIs('expenses.*')" icon="receipt">
Gastos
</x-sidebar-link>
<x-sidebar-link href="{{ route('reports.index') }}" :active="request()->routeIs('reports.*')" icon="chart">
Reportes
</x-sidebar-link>
@if(auth()->user()->role === 'admin')
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Sistema</p>
</div>
<x-sidebar-link href="{{ route('admin.backups.index') }}" :active="request()->routeIs('admin.backups.*')" icon="database">
Respaldos
</x-sidebar-link>
@endif
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Soporte</p>
</div>
<x-sidebar-link href="{{ route('faq') }}" :active="request()->routeIs('faq')" icon="question">
Ayuda/FAQ
</x-sidebar-link>
@endauth
</div>
<!-- Sidebar Footer (Logout) -->
@auth
<div class="p-4 border-t border-neutral-300 dark:border-neutral-800 bg-neutral-200 dark:bg-neutral-950">
<div class="mb-3 px-2 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-lime-500 dark:bg-neon-lime text-black flex items-center justify-center font-bold text-sm">
{{ substr(auth()->user()->name, 0, 1) }}
</div>
<div class="flex flex-col">
<span class="text-sm font-bold text-black dark:text-white">{{ auth()->user()->name }}</span>
<span class="text-xs text-neutral-500 dark:text-neutral-400">{{ ucfirst(auth()->user()->role) }}</span>
</div>
</div>
<form action="{{ route('logout') }}" method="post" class="w-full">
@csrf
<button class="w-full flex items-center justify-center gap-2 font-bold text-sm text-red-600 dark:text-red-500 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 py-2.5 px-4 rounded-lg hover:bg-red-600 hover:text-white hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-white transition-all duration-300 tracking-wide" type="submit">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
Cerrar Sesión
</button>
</form>
</div>
@endauth
</aside>