{{-- menu lateral --}}
    @php
        $config = \App\Models\Configuracione::orderby('id', 'desc')->first();
        $bg = $config->color_barra ?? '#0000ff';
    @endphp

<aside x-cloak :class="openAside ? 'translate-x-0' : '-translate-x-full'" class="z-20 fixed inset-y-0 left-0 w-64 transform transition-transform duration-300 ease-in-out min-h-screen shadow-lg flex flex-col" style="background: {{ $bg }};">
    <div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20 sticky top-0 bg-[{{ $bg }}] z-30">
        <div class="w-20">
            <x-application-logo />
        </div>

        <button @click="openAside = !openAside"
            class="p-2 rounded-md text-white hover:bg-blue-900 focus:outline-none cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <div class="flex-1 overflow-y-auto select-none">
        <div class="text-center py-4 ms:py-6">
                <div class="relative">
                    <div class="flex items-center justify-center gap-2 w-full">
                        <a href="{{ route('perfil') }}" class="rounded-full border-2 border-neutral-200 shadow-sm w-12 h-12 overflow-hidden mb-2">
                            @if (Auth::user()->img_perfil)
                                <img src="{{ Auth::user()->img_perfil }}" alt="" class="w-12 h-12 object-contain">
                            @else
                                <img src="https://ui-avatars.com/api/?name={{ Auth::user()->name ?? 'no name' }}" alt="" class="w-12 h-12 object-cover">
                            @endif
                        </a>
                    </div>

                    <a href="{{ route('perfil') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-purple-600 w-6 h-6 absolute -top-0 right-3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                        </svg>
                    </a>
                </div>


                <div class="font-medium text-base text-white">{{ Auth::user()->name ?? ''}}</div>
                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email ?? ''}}</div>
                <div class="font-semibold text-sm text-gray-500 capitalize">{{ Auth::user()->rol->nombre ?? ''}}</div>

            <!-- Items del menú -->
            <nav class="px-4 mt-2 space-y-2 pb-4">
                <a href="{{ route('dashboard') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('dashboard') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                    </svg>
                    <span>Inicio</span>
                </a>
                <a href="{{ route('clientes') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('clientes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                    <span>Clientes</span>
                </a>
                <a href="{{ route('servicios') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('servicios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
                    </svg>
                    <span>Servicios</span>
                </a>
                <a href="{{ route('top') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('top') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                    </svg>
                    <span>Top distribuidores</span>
                </a>
                @if (!empty($config->catalogo))
                    <a href="{{ asset($config->catalogo) }}" download="{{ basename($config->catalogo) }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left">
                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                        </svg>
                        <span>Descargar Catalogo</span>
                    </a>
                @endif
                @if (auth()->user()->rol->nombre != 'editor' && auth()->user()->rol->nombre != 'administrador')
                    <a href="{{ route('reportes') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('reportes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                        </svg>
                        <span>Reportes</span>
                    </a>
                @endif

                @if ((auth()->user()->subvendedor && $config->subvendedor) || in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                    <div x-data="{ open: false }" class="space-y-1">
                        <!-- Botón para admin -->
                        <button @click="open = !open"
                            class="flex items-center justify-between w-full py-2 px-3 rounded text-white hover:bg-white/10 focus:outline-none">
                            <div class="flex items-center gap-2">

                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
                                </svg>

                                <span>
                                    @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                                        Admin
                                    @else
                                        Subvendedor
                                    @endif
                                </span>
                            </div>
                            <svg :class="open ? 'rotate-180' : ''" class="w-4 h-4 transform transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>

                        <!-- Submenú -->
                        <div x-show="open" x-transition class="space-y-1">
                            @if ($config->subvendedor && auth()->user()->subvendedor)
                                <a href="{{ route('roles') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('roles') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Roles</span>
                                </a>
                                <a href="{{ route('usuarios') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('usuarios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Usuarios</span>
                                </a>
                                <a href="{{ route('logs-comisiones') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('logs-comisiones') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Log Comisiones</span>
                                </a>
                                @if (auth()->user()->rol->nombre != 'super')
                                    <a href="{{ route('tarifas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('tarifas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                        </svg>
                                        <span>Gestión Tarifas</span>
                                    </a>
                                @endif
                            @endif

                            @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                                <a href="{{ route('planes') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('planes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Planes</span>
                                </a>
                                <a href="{{ route('import') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('import') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Importar Cuentas</span>
                                </a>
                                <a href="{{ route('usuarios') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('usuarios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Usuarios</span>
                                </a>
                                @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador']))
                                    <a href="{{ route('pendientes') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('pendientes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                        </svg>
                                        <span>Gestión Pendientes</span>
                                    </a>
                                    <a href="{{ route('logGeneral') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('logGeneral') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                        </svg>
                                        <span>Log General</span>
                                    </a>
                                    <a href="{{ route('logs') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('logs') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                        </svg>
                                        <span>Log Cuentas</span>
                                    </a>
                                    <a href="{{ route('reversar') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('reversar') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" />
                                        </svg>
                                        <span>Reversar Compras</span>
                                    </a>

                                    @if (auth()->user()->rol->nombre == 'super')
                                    <a href="{{ route('gestion-rangos') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('gestion-rangos') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                        </svg>
                                        <span>Gestión Rangos</span>
                                    </a>
                                        <a href="{{ route('tarifas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('tarifas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Gestión Tarifas</span>
                                        </a>
                                        <a href="{{ route('utilidades') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('utilidades') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Utilidades</span>
                                        </a>
                                        <a href="{{ route('logHistorial') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('logHistorial') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Log historial</span>
                                        </a>
                                        <a href="{{ route('logsRecargas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('logsRecargas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Log Recargas</span>
                                        </a>
                                        <a href="{{ route('promociones') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('promociones') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Gestión Promociones</span>
                                        </a>
                                        <a href="{{ route('servicio') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('servicio') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Gestión Servicios</span>
                                        </a>
                                        <a href="{{ route('categoria') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('categoria') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Gestión Categorias</span>
                                        </a>
                                        <a href="{{ route('configuracion') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('configuracion') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                            </svg>
                                            <span>Configuración</span>
                                        </a>
                                    @endif
                                @endif
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Módulo WhatsApp (solo admins) --}}
                @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador']))
                    <div x-data="{ openWa: false }" class="space-y-1">
                        {{-- Módulo WhatsApp oculto --}}
                    </div>
                @endif

                {{-- Módulo Chat (Web + Telegram) --}}
                @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador']))
                    <div x-data="{ openChat: false }" class="space-y-1">
                        <button @click="openChat = !openChat"
                            class="flex items-center justify-between w-full py-2 px-3 rounded text-white hover:bg-white/10 focus:outline-none">
                            <div class="flex items-center gap-2">
                                <svg class="w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
                                </svg>
                                <span>Chat / Bot</span>
                            </div>
                            <svg :class="openChat ? 'rotate-180' : ''" class="w-4 h-4 transform transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openChat" x-transition class="space-y-1">
                            <a href="{{ route('chat.conversaciones') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('chat.conversaciones') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /></svg>
                                <span>Conversaciones</span>
                            </a>
                            <a href="{{ route('chat.comprobantes') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('chat.comprobantes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" /></svg>
                                <span>Comprobantes</span>
                            </a>
                            <a href="{{ route('chat.configuracion') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('chat.configuracion') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                                <span>Configuración</span>
                            </a>
                            <a href="{{ route('whatsapp.correo') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('whatsapp.correo') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                                <span>Correo / IMAP</span>
                            </a>
                            <a href="{{ route('chat.ia-logs') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white text-left {{ request()->routeIs('chat.ia-logs') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9h-7.5M15.75 12h-7.5M15.75 15h-4.5" /></svg>
                                <span>Logs IA</span>
                            </a>
                        </div>
                    </div>
                @endif

                <livewire:show-saving-ip />

                <!-- Logout -->
                <div>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
                            </svg>
                            <span>Cerrar sesión</span>
                        </button>
                    </form>
                </div>
            </nav>
        </div>
    </div>
</aside>