<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

        <style>
            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            :root {
                --cyan: #00f5ff;
                --blue: #0066ff;
                --dark: #020510;
                --dark2: #050c1a;
                --dark3: #071225;
                --text: #e8f4ff;
                --muted: #5a7a9a;
                --border: rgba(0,245,255,0.10);
                --sidebar-w: 240px;
            }

            html, body { height: 100%; }

            body {
                font-family: 'Syne', sans-serif;
                background: var(--dark);
                color: var(--text);
                display: flex;
                min-height: 100vh;
                overflow-x: hidden;
            }

            .bg-grid {
                position: fixed; inset: 0;
                background-image:
                    linear-gradient(rgba(0,102,255,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,102,255,0.045) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none; z-index: 0;
            }
            .bg-glow {
                position: fixed; top: -20%; right: -10%;
                width: 600px; height: 600px;
                background: radial-gradient(circle, rgba(0,102,255,0.12) 0%, transparent 70%);
                pointer-events: none; z-index: 0;
            }

            /* SIDEBAR */
            .sidebar {
                position: fixed; top: 0; left: 0;
                width: var(--sidebar-w); height: 100vh;
                background: var(--dark2);
                border-right: 1px solid var(--border);
                display: flex; flex-direction: column; z-index: 50;
            }

            .sidebar-logo {
                display: flex; align-items: center; gap: 12px;
                padding: 28px 24px 24px;
                border-bottom: 1px solid var(--border);
                text-decoration: none;
            }

            .logo-icon {
                width: 36px; height: 36px;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                border-radius: 8px;
                display: flex; align-items: center; justify-content: center;
                font-family: 'Space Mono', monospace;
                font-weight: 700; font-size: 14px; color: #000;
                flex-shrink: 0;
                box-shadow: 0 0 18px rgba(0,245,255,0.3);
            }

            .logo-text {
                font-size: 16px; font-weight: 700;
                color: var(--text); letter-spacing: 0.04em;
            }

            .sidebar-nav {
                flex: 1; padding: 20px 12px;
                display: flex; flex-direction: column; gap: 2px;
                overflow-y: auto;
            }

            .nav-label {
                font-family: 'Space Mono', monospace;
                font-size: 10px; text-transform: uppercase;
                letter-spacing: 0.15em; color: var(--muted);
                padding: 14px 12px 6px;
            }

            .nav-item {
                display: flex; align-items: center; gap: 10px;
                padding: 10px 14px; border-radius: 8px;
                text-decoration: none; color: var(--muted);
                font-size: 14px; font-weight: 600;
                transition: all 0.2s;
                border: 1px solid transparent;
            }

            .nav-item:hover {
                background: rgba(0,245,255,0.06);
                color: var(--text); border-color: var(--border);
            }

            .nav-item.active {
                background: rgba(0,245,255,0.08);
                color: var(--cyan);
                border-color: rgba(0,245,255,0.18);
            }

            .nav-dot {
                width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; flex-shrink: 0; opacity: 0.5;
            }

            .nav-item.active .nav-dot { opacity: 1; box-shadow: 0 0 8px currentColor; }

            .sidebar-footer {
                padding: 20px 12px;
                border-top: 1px solid var(--border);
            }

            .user-card {
                display: flex; align-items: center; gap: 10px;
                padding: 10px 12px; border-radius: 8px;
                background: rgba(0,245,255,0.04);
                border: 1px solid var(--border); margin-bottom: 10px;
            }

            .user-avatar {
                width: 32px; height: 32px; border-radius: 50%;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                display: flex; align-items: center; justify-content: center;
                font-size: 12px; font-weight: 700; color: #000; flex-shrink: 0;
            }

            .user-name { font-size: 13px; font-weight: 600; color: var(--text); }
            .user-role {
                font-size: 10px; font-family: 'Space Mono', monospace;
                color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
            }

            .btn-logout {
                display: flex; align-items: center; justify-content: center; gap: 8px;
                width: 100%; padding: 9px;
                background: transparent;
                border: 1px solid rgba(255,60,60,0.2);
                border-radius: 8px; color: rgba(255,100,100,0.7);
                font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600;
                cursor: pointer; text-decoration: none; transition: all 0.2s;
            }

            .btn-logout:hover {
                background: rgba(255,60,60,0.08);
                border-color: rgba(255,60,60,0.4); color: #ff6464;
            }

            /* MAIN */
            .main-content {
                margin-left: var(--sidebar-w); flex: 1;
                display: flex; flex-direction: column;
                position: relative; z-index: 1; min-height: 100vh;
            }

            /* TOPBAR */
            .topbar {
                position: sticky; top: 0;
                background: rgba(2,5,16,0.92);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid var(--border);
                padding: 20px 36px; z-index: 40;
            }

            .topbar-title {
                font-size: 20px; font-weight: 800;
                letter-spacing: -0.02em; color: var(--text);
            }

            /* PAGE */
            .page-body { padding: 36px; flex: 1; }

            /* CARD */
            .card {
                background: var(--dark2);
                border: 1px solid var(--border);
                border-radius: 16px; padding: 32px;
                position: relative; overflow: hidden;
                margin-bottom: 24px;
            }

            .card::before {
                content: ''; position: absolute;
                top: 0; left: 15%; right: 15%; height: 1px;
                background: linear-gradient(90deg, transparent, rgba(0,245,255,0.3), transparent);
            }

            .card-title {
                font-size: 15px; font-weight: 700; color: var(--text);
                letter-spacing: -0.01em; margin-bottom: 24px;
                padding-bottom: 16px; border-bottom: 1px solid var(--border);
                font-family: 'Space Mono', monospace;
                text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px;
                color: var(--muted);
            }

            /* STATS */
            .stat-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px; margin-bottom: 24px;
            }

            .stat-card {
                background: var(--dark2);
                border: 1px solid var(--border);
                border-radius: 14px; padding: 24px;
                position: relative; overflow: hidden;
                transition: all 0.3s;
            }

            .stat-card:hover {
                border-color: rgba(0,245,255,0.2);
                transform: translateY(-2px);
                box-shadow: 0 12px 40px rgba(0,0,0,0.3);
            }

            .stat-line {
                position: absolute; top: 0; left: 0; right: 0; height: 2px;
            }

            .line-blue   { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
            .line-green  { background: linear-gradient(90deg, #00c864, #00f5a0); }
            .line-amber  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
            .line-purple { background: linear-gradient(90deg, #8b5cf6, #c084fc); }

            .stat-label {
                font-family: 'Space Mono', monospace; font-size: 10px;
                text-transform: uppercase; letter-spacing: 0.12em;
                color: var(--muted); margin-bottom: 12px;
            }

            .stat-value {
                font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
                background: linear-gradient(135deg, var(--text), var(--cyan));
                -webkit-background-clip: text; -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            /* ACTION BUTTONS */
            .action-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 14px;
            }

            .action-btn {
                display: flex; align-items: center; gap: 14px;
                padding: 18px 20px;
                background: rgba(0,245,255,0.03);
                border: 1px solid var(--border);
                border-radius: 12px; color: var(--text);
                font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 600;
                text-decoration: none; transition: all 0.25s; cursor: pointer;
            }

            .action-btn:hover {
                background: rgba(0,245,255,0.07);
                border-color: rgba(0,245,255,0.22);
                transform: translateY(-2px);
                box-shadow: 0 8px 30px rgba(0,0,0,0.3);
                color: var(--cyan);
            }

            .action-icon {
                width: 36px; height: 36px; border-radius: 8px;
                display: flex; align-items: center; justify-content: center;
                flex-shrink: 0;
            }

            .icon-blue   { background: rgba(0,102,255,0.15); border: 1px solid rgba(0,102,255,0.3); color: #60a5fa; }
            .icon-cyan   { background: rgba(0,245,255,0.10); border: 1px solid rgba(0,245,255,0.25); color: var(--cyan); }
            .icon-green  { background: rgba(0,200,100,0.10); border: 1px solid rgba(0,200,100,0.25); color: #4ade80; }
            .icon-amber  { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24; }
            .icon-purple { background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.25); color: #c084fc; }
            .icon-red    { background: rgba(255,60,60,0.10); border: 1px solid rgba(255,60,60,0.25); color: #f87171; }
            .icon-gray   { background: rgba(90,122,154,0.10); border: 1px solid rgba(90,122,154,0.25); color: var(--muted); }

            .action-icon svg { width: 16px; height: 16px; }

            /* TABLE */
            .data-table { width: 100%; border-collapse: collapse; }

            .data-table thead tr { border-bottom: 1px solid var(--border); }

            .data-table th {
                font-family: 'Space Mono', monospace; font-size: 10px;
                text-transform: uppercase; letter-spacing: 0.12em;
                color: var(--muted); padding: 10px 16px;
                text-align: left; font-weight: 400;
            }

            .data-table td {
                padding: 14px 16px; font-size: 14px; color: var(--text);
                border-bottom: 1px solid rgba(0,245,255,0.04);
            }

            .data-table tbody tr:hover td { background: rgba(0,245,255,0.025); }
            .data-table tbody tr:last-child td { border-bottom: none; }

            .table-id {
                font-family: 'Space Mono', monospace; font-size: 12px; color: var(--muted);
            }

            .table-btn {
                display: inline-flex; align-items: center; gap: 6px;
                padding: 6px 14px; border-radius: 6px;
                border: 1px solid var(--border); background: transparent;
                color: var(--muted); font-family: 'Syne', sans-serif;
                font-size: 12px; font-weight: 600; cursor: pointer;
                text-decoration: none; transition: all 0.2s;
            }

            .table-btn:hover {
                border-color: rgba(0,245,255,0.3);
                color: var(--cyan); background: rgba(0,245,255,0.05);
            }

            /* INFO */
            .info-row {
                display: flex; padding: 14px 0; align-items: center;
                border-bottom: 1px solid rgba(0,245,255,0.04);
            }
            .info-row:last-child { border-bottom: none; }
            .info-key {
                font-family: 'Space Mono', monospace; font-size: 11px;
                text-transform: uppercase; letter-spacing: 0.1em;
                color: var(--muted); width: 160px; flex-shrink: 0;
            }
            .info-val { font-size: 15px; font-weight: 600; color: var(--text); }

            @media (max-width: 1024px) {
                .sidebar { display: none; }
                .main-content { margin-left: 0; }
                .stat-grid { grid-template-columns: repeat(2, 1fr); }
                .action-grid { grid-template-columns: 1fr; }
                .page-body { padding: 20px; }
                .topbar { padding: 16px 20px; }
            }
        </style>
    </head>
    <body>
        <div class="bg-grid"></div>
        <div class="bg-glow"></div>

        <!-- SIDEBAR -->
        <aside class="sidebar">
            <a href="{{ url('/') }}" class="sidebar-logo">
                <div class="logo-icon">{{ substr(config('app.name', 'L'), 0, 1) }}</div>
                <span class="logo-text">{{ config('app.name', 'Laravel') }}</span>
            </a>

            <nav class="sidebar-nav">
                <span class="nav-label">Principal</span>
                <a href="{{ route('dashboard') }}" class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                    <span class="nav-dot"></span> Dashboard
                </a>

                @auth
                    @if(auth()->user()->rol === 'admin')
                        <span class="nav-label">Administración</span>
                        <a href="{{ route('admin.dashboard') }}" class="nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><span class="nav-dot"></span> Panel Admin</a>
                        <a href="{{ route('admin.usuarios.index') }}" class="nav-item {{ request()->is('admin/usuarios*') ? 'active' : '' }}"><span class="nav-dot"></span> Usuarios</a>
                        <a href="{{ route('admin.estudiantes.index') }}" class="nav-item {{ request()->is('admin/estudiantes*') ? 'active' : '' }}"><span class="nav-dot"></span> Estudiantes</a>
                        <a href="{{ route('admin.servicios.index') }}" class="nav-item {{ request()->is('admin/servicios*') ? 'active' : '' }}"><span class="nav-dot"></span> Servicios</a>
                        <a href="{{ route('admin.reportes.index') }}" class="nav-item {{ request()->is('admin/reportes*') ? 'active' : '' }}"><span class="nav-dot"></span> Reportes</a>
                        <a href="{{ route('admin.pagos.index') }}" class="nav-item {{ request()->is('admin/pagos*') ? 'active' : '' }}"><span class="nav-dot"></span> Pagos</a>
                        <a href="{{ route('admin.configuracion.index') }}" class="nav-item {{ request()->is('admin/configuracion*') ? 'active' : '' }}"><span class="nav-dot"></span> Configuración</a>
                    @elseif(auth()->user()->rol === 'tesoreria')
                        <span class="nav-label">Tesorería</span>
                        <a href="{{ route('tesoreria.dashboard') }}" class="nav-item {{ request()->routeIs('tesoreria.dashboard') ? 'active' : '' }}"><span class="nav-dot"></span> Panel Tesorería</a>
                        <a href="{{ route('tesoreria.pagos') }}" class="nav-item {{ request()->is('tesoreria/pagos*') ? 'active' : '' }}"><span class="nav-dot"></span> Pagos Realizados</a>
                        <a href="{{ route('tesoreria.boletas') }}" class="nav-item {{ request()->is('tesoreria/boletas*') ? 'active' : '' }}"><span class="nav-dot"></span> Boletas</a>
                        <a href="{{ route('tesoreria.deudas') }}" class="nav-item {{ request()->is('tesoreria/deudas*') ? 'active' : '' }}"><span class="nav-dot"></span> Deudas Pendientes</a>
                    @elseif(auth()->user()->rol === 'secretaria')
                        <span class="nav-label">Secretaría</span>
                        <a href="{{ route('secretaria.dashboard') }}" class="nav-item {{ request()->routeIs('secretaria.dashboard') ? 'active' : '' }}"><span class="nav-dot"></span> Panel Secretaría</a>
                        <a href="{{ route('secretaria.constancias') }}" class="nav-item {{ request()->is('secretaria/constancias*') ? 'active' : '' }}"><span class="nav-dot"></span> Constancias</a>
                        <a href="{{ route('secretaria.certificados') }}" class="nav-item {{ request()->is('secretaria/certificados*') ? 'active' : '' }}"><span class="nav-dot"></span> Certificados</a>
                        <a href="{{ route('secretaria.no_adeudo') }}" class="nav-item {{ request()->is('secretaria/no-adeudo*') ? 'active' : '' }}"><span class="nav-dot"></span> No Adeudo</a>
                    @else
                        <span class="nav-label">Mi Cuenta</span>
                        <a href="{{ route('estudiante.dashboard') }}" class="nav-item {{ request()->routeIs('estudiante.dashboard') ? 'active' : '' }}"><span class="nav-dot"></span> Mi Panel</a>
                        <a href="{{ route('estudiante.deudas') }}" class="nav-item {{ request()->is('estudiante/deudas*') ? 'active' : '' }}"><span class="nav-dot"></span> Mis Deudas</a>
                        <a href="{{ route('estudiante.pagos') }}" class="nav-item {{ request()->is('estudiante/pagos*') ? 'active' : '' }}"><span class="nav-dot"></span> Historial de Pagos</a>
                        <a href="{{ route('estudiante.tramites') }}" class="nav-item {{ request()->is('estudiante/tramites*') ? 'active' : '' }}"><span class="nav-dot"></span> Trámites</a>
                    @endif
                @endauth
            </nav>

            <div class="sidebar-footer">
                @auth
                    <div class="user-card">
                        <div class="user-avatar">{{ substr(auth()->user()->name, 0, 1) }}</div>
                        <div style="overflow:hidden">
                            <div class="user-name" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ auth()->user()->name }}</div>
                            <div class="user-role">{{ auth()->user()->rol ?? 'usuario' }}</div>
                        </div>
                    </div>
                @endauth
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="btn-logout">
                        <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
                            <path d="M6 2H3a1 1 0 00-1 1v10a1 1 0 001 1h3M10 11l3-3-3-3M13 8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Cerrar sesión
                    </button>
                </form>
            </div>
        </aside>

        <!-- MAIN -->
        <div class="main-content">
            @isset($header)
                <div class="topbar">
                    <div class="topbar-title">{{ $header }}</div>
                </div>
            @endisset

            <main class="page-body">
                {{ $slot }}
            </main>
        </div>
    </body>
</html>