{{--
    NAVBAR UNIVERSIDAD v1 - BLADE + ALPINE.JS
    - Slider de imágenes con overlay glassmorphism
    - Navbar transparente sobre el slider
    - Desktop (>1280px): menú izquierdo + logo centro + menú derecho (académico, buscar, redes, contactos)
    - Mobile (≤1280px): botón ☰ Menú (drawer izquierdo) + botón ℹ Académico (panel derecho)
    - Alpine.js para interactividad (submenús, drawers)
    - Color principal: #fdb913
--}}

{{-- ============================================================
     DEPENDENCIAS (quitar si ya están en el layout)
============================================================ --}}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
/* ============================================================
   VARIABLES
============================================================ */
:root {
    --gold:         #fdb913;
    --gold-light:   #fecf5e;
    --gold-dark:    #c9940e;
    --dark:         #0D1B2A;
    --white:        #ffffff;
    --glass-bg:     rgba(10, 20, 40, 0.45);
    --glass-border: rgba(253, 185, 19, 0.35);
    --glass-hover:  rgba(253, 185, 19, 0.13);
    --font-display: 'Playfair Display', serif;
    --font-body:    'Barlow', sans-serif;
    --drawer-w:     320px;
    --acad-w:       300px;
}

/* ============================================================
   RESET BÁSICO (solo para este componente)
============================================================ */
.unav *, .unav *::before, .unav *::after { box-sizing: border-box; }
.unav { font-family: var(--font-body); }

/* ============================================================
   SLIDER
============================================================ */
.unav-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.unav-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    background-size: cover;
    background-position: center;
}
.unav-slide.active { opacity: 1; }

.unav-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(8,15,30,0.55) 0%,
        rgba(8,15,30,0.28) 50%,
        rgba(8,15,30,0.72) 100%);
}

/* Slides de ejemplo — reemplazar background-image con imágenes reales */
.unav-slide-1 { background: linear-gradient(135deg,#0f2027,#203a43,#2c5364); }
.unav-slide-2 { background: linear-gradient(135deg,#1a0533,#3b0a6b,#8e44ad); }
.unav-slide-3 { background: linear-gradient(135deg,#0a2e12,#1a5c24,#27ae60); }
.unav-slide-4 { background: linear-gradient(135deg,#1a1200,#3a2a00,#fdb913); }

.unav-slide-content {
    position: absolute;
    bottom: 18%; left: 8%;
    z-index: 2;
    color: var(--white);
    max-width: 600px;
}
.unav-slide-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.8rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.unav-slide-content p {
    font-size: 1.05rem;
    font-weight: 300;
    opacity: 0.88;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Flechas del slider */
.unav-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(253,185,19,0.3);
    color: var(--gold);
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}
.unav-arrow:hover { background: rgba(253,185,19,0.22); border-color: var(--gold); }
.unav-arrow-prev { left: 2%; }
.unav-arrow-next { right: 2%; }

/* Dots */
.unav-dots {
    position: absolute;
    bottom: 6%; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 10;
}
.unav-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    border: 1px solid rgba(253,185,19,0.5);
    transition: all 0.3s;
}
.unav-dot.active { background: var(--gold); width: 26px; border-radius: 4px; }

/* ============================================================
   NAVBAR (flotando sobre el slider)
============================================================ */
.unav-navbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
}

.unav-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 72px;
    gap: 1rem;
    position: relative;
}

/* --- Logo central --- */
.unav-logo {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 1rem;
    cursor: pointer;
    text-decoration: none;
}
.unav-logo-emblem {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(253,185,19,0.6);
    box-shadow: 0 0 20px rgba(253,185,19,0.3);
    overflow: hidden;
}
.unav-logo-emblem img { height: 36px; width: auto; object-fit: contain; }
.unav-logo-emblem i  { color: var(--dark); font-size: 22px; }
.unav-logo-name {
    font-family: var(--font-display);
    font-size: 0.72rem; font-weight: 600;
    color: var(--gold); letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}
.unav-logo-sub {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Menú izquierdo (desktop) --- */
.unav-left {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
}

.unav-nav-item { position: relative; display: flex; align-items: center; }

.unav-nav-link {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.25s;
    display: flex; align-items: center; gap: 4px;
    cursor: pointer;
    background: none; border: none;
    height: 72px;
}
.unav-nav-link:hover,
.unav-nav-link.active { color: var(--gold); background: var(--glass-hover); }
.unav-nav-link .caret {
    font-size: 0.6rem; opacity: 0.7;
    transition: transform 0.25s;
}
.unav-nav-link.open .caret { transform: rotate(180deg); }

/* Dropdown desktop */
.unav-dropdown {
    position: absolute;
    top: 100%; left: 0;
    min-width: 210px;
    background: rgba(8,18,38,0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 0 0 6px 6px;
    padding: 0.5rem 0;
    z-index: 200;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
/* Puente invisible para no perder el hover */
.unav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}
.unav-dropdown a {
    display: flex; align-items: center; gap: 8px;
    padding: 0.55rem 1.2rem;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    font-size: 0.8rem; font-weight: 400;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    border-left: 2px solid transparent;
}
.unav-dropdown a:hover {
    color: var(--gold);
    background: rgba(253,185,19,0.08);
    border-left-color: var(--gold);
    padding-left: 1.5rem;
}
.unav-dropdown-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    opacity: 0.7;
}
.unav-dropdown-title {
    padding: 0.4rem 1.2rem 0.3rem;
    color: var(--gold);
    font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(253,185,19,0.2);
    margin-bottom: 0.3rem;
}

/* --- Menú derecho (desktop) --- */
.unav-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    justify-content: flex-end;
}

.unav-btn-acad {
    display: flex; align-items: center; gap: 7px;
    background: rgba(253,185,19,0.14);
    border: 1px solid rgba(253,185,19,0.45);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}
.unav-btn-acad:hover { background: rgba(253,185,19,0.28); color: var(--gold); }
.unav-btn-acad i { font-size: 0.95rem; }
.unav-btn-acad .ba-arrow { font-size: 0.62rem; transition: transform 0.3s; }
.unav-btn-acad.panel-open .ba-arrow { transform: rotate(180deg); }

.unav-icon-btn {
    width: 36px; height: 36px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    font-size: 14px;
    text-decoration: none;
}
.unav-icon-btn:hover {
    color: var(--gold);
    border-color: rgba(253,185,19,0.4);
    background: var(--glass-hover);
}

.unav-social-group {
    display: flex; align-items: center; gap: 2px;
    border-left: 1px solid rgba(255,255,255,0.12);
    padding-left: 0.5rem; margin-left: 0.2rem;
}

/* Contact dropdown (desktop) */
.unav-contact-wrap { position: relative; }
.unav-contact-drop {
    position: absolute;
    top: 100%; right: 0; left: auto;
    min-width: 260px;
    background: rgba(8,18,38,0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 1rem;
    z-index: 200;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.unav-contact-drop::before {
    content: '';
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}
.unav-contact-title {
    font-family: var(--font-display);
    font-size: 0.85rem; color: var(--gold);
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(253,185,19,0.2);
}
.unav-contact-row {
    display: flex; align-items: center; gap: 10px;
    padding: 0.45rem 0;
    color: rgba(255,255,255,0.82);
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.unav-contact-row:last-child { border-bottom: none; }
.unav-contact-row i { color: var(--gold); width: 16px; text-align: center; font-size: 13px; }
.unav-csocials { display: flex; gap: 8px; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(253,185,19,0.2); }
.unav-csocials a {
    width: 32px; height: 32px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; text-decoration: none; transition: all 0.2s;
}
.unav-csocials a:hover { filter: brightness(1.3); transform: translateY(-2px); }
.unav-cs-fb { background:rgba(24,119,242,0.2); color:#4e9af1; border:1px solid rgba(24,119,242,0.3); }
.unav-cs-ig { background:rgba(228,64,95,0.2);  color:#f06090; border:1px solid rgba(228,64,95,0.3); }
.unav-cs-yt { background:rgba(255,0,0,0.15);   color:#ff5555; border:1px solid rgba(255,0,0,0.25); }
.unav-cs-tw { background:rgba(29,161,242,0.15); color:#55aaff; border:1px solid rgba(29,161,242,0.25); }

/* Buscador (barra debajo del navbar) */
.unav-search-bar {
    border-top: 1px solid var(--glass-border);
    padding: 1.2rem 2rem;
    background: rgba(8,18,38,0.97);
    backdrop-filter: blur(20px);
}
.unav-search-wrap {
    display: flex;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    overflow: hidden;
    max-width: 700px;
    margin: 0 auto;
}
.unav-search-wrap input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: none; outline: none;
    color: white;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.75rem 1.2rem;
}
.unav-search-wrap input::placeholder { color: rgba(255,255,255,0.35); }
.unav-search-btn {
    background: var(--gold); border: none;
    color: var(--dark);
    padding: 0 1.2rem;
    font-size: 14px; cursor: pointer;
    height: 48px; transition: background 0.2s;
}
.unav-search-btn:hover { background: var(--gold-light); }

/* ============================================================
   BOTONES MOBILE (hamburguesa + académico)
============================================================ */
.unav-ham-btn {
    display: none;
    align-items: center; gap: 9px;
    background: rgba(253,185,19,0.12);
    border: 1px solid rgba(253,185,19,0.4);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.48rem 1rem 0.48rem 0.8rem;
    border-radius: 5px; cursor: pointer;
    transition: all 0.25s; flex-shrink: 0; z-index: 10;
}
.unav-ham-btn:hover { background: rgba(253,185,19,0.25); color: var(--gold); }
.unav-ham-lines { display: flex; flex-direction: column; gap: 4.5px; width: 19px; }
.unav-ham-lines span {
    display: block; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
    transform-origin: center;
}
/* Botón acad mobile */
.unav-mob-acad-btn {
    display: none;
    align-items: center; gap: 7px;
    background: rgba(253,185,19,0.14);
    border: 1px solid rgba(253,185,19,0.45);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    padding: 0.48rem 0.9rem 0.48rem 0.75rem;
    border-radius: 5px; cursor: pointer;
    transition: all 0.25s; flex-shrink: 0; z-index: 10;
}
.unav-mob-acad-btn:hover { background: rgba(253,185,19,0.28); color: var(--gold); }
.unav-mob-acad-btn i.bam-icon { font-size: 1rem; }
.unav-mob-acad-btn i.bam-arrow { font-size: 0.6rem; opacity: 0.65; transition: transform 0.3s; }

/* ============================================================
   OVERLAY COMPARTIDO
============================================================ */
.unav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.unav-overlay-drawer { z-index: 998; }
.unav-overlay-acad   { z-index: 994; }
.unav-overlay.vis  { display: block; }
.unav-overlay.show { opacity: 1; }

/* ============================================================
   DRAWER IZQUIERDO
============================================================ */
.unav-drawer {
    position: fixed; top: 0; left: 0;
    width: var(--drawer-w); height: 100vh;
    background: rgba(5,12,26,0.98);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--glass-border);
    z-index: 999;
    transform: translateX(calc(-1 * var(--drawer-w) - 10px));
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 6px 0 40px rgba(0,0,0,0.5);
}
.unav-drawer.open { transform: translateX(0); }

.unav-drawer-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid rgba(253,185,19,0.18);
    background: rgba(0,0,0,0.2); flex-shrink: 0;
}
.unav-drawer-logo { display: flex; align-items: center; gap: 10px; }
.unav-drawer-emblem {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(145deg,var(--gold),var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(253,185,19,0.5); flex-shrink: 0; overflow: hidden;
}
.unav-drawer-emblem img { height: 28px; width: auto; object-fit: contain; }
.unav-drawer-emblem i  { color: var(--dark); font-size: 16px; }
.unav-drawer-inst  { font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.unav-drawer-sub   { font-size: 0.58rem; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; text-transform: uppercase; }
.unav-close-btn {
    width: 30px; height: 30px; border-radius: 4px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; transition: all 0.2s; flex-shrink: 0;
}
.unav-close-btn:hover { color: var(--gold); border-color: rgba(253,185,19,0.4); background: var(--glass-hover); }

.unav-drawer-nav {
    flex: 1; overflow-y: auto; padding: 0.6rem 0;
    scrollbar-width: thin; scrollbar-color: rgba(253,185,19,0.25) transparent;
}
.unav-drawer-nav::-webkit-scrollbar { width: 3px; }
.unav-drawer-nav::-webkit-scrollbar-thumb { background: rgba(253,185,19,0.25); border-radius: 2px; }

.unav-sec-label {
    padding: 0.85rem 1.3rem 0.25rem;
    font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold); opacity: 0.65;
}
.unav-d-item { border-bottom: 1px solid rgba(255,255,255,0.04); }

.unav-d-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.72rem 1.3rem;
    color: rgba(255,255,255,0.8); text-decoration: none;
    font-size: 0.84rem; font-weight: 500; letter-spacing: 0.025em;
    transition: all 0.2s; cursor: pointer;
    border-left: 3px solid transparent;
    background: none; border-top: none; border-right: none; border-bottom: none;
    width: 100%; text-align: left;
}
.unav-d-link:hover,
.unav-d-link.is-open { color: var(--gold); background: rgba(253,185,19,0.07); border-left-color: var(--gold); }
.unav-d-link .dl-left  { display: flex; align-items: center; gap: 10px; }
.unav-d-link .dl-icon  { font-size: 13px; color: var(--gold); opacity: 0.75; width: 16px; text-align: center; }
.unav-d-link .dl-caret { font-size: 0.62rem; opacity: 0.45; transition: transform 0.28s ease; }
.unav-d-link.is-open .dl-caret { transform: rotate(180deg); opacity: 0.9; }

.unav-d-sub {
    overflow: hidden;
    background: rgba(0,0,0,0.18);
}
.unav-d-sub a {
    display: flex; align-items: center;
    padding: 0.55rem 1.3rem 0.55rem 3rem;
    color: rgba(255,255,255,0.58); text-decoration: none;
    font-size: 0.78rem; font-weight: 400;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.unav-d-sub a::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(253,185,19,0.4); margin-right: 9px;
    flex-shrink: 0; transition: background 0.2s;
}
.unav-d-sub a:hover { color: var(--gold-light); padding-left: 3.3rem; border-left-color: rgba(253,185,19,0.35); }
.unav-d-sub a:hover::before { background: var(--gold); }

.unav-drawer-ft {
    border-top: 1px solid rgba(253,185,19,0.18);
    padding: 0.9rem 1.3rem;
    background: rgba(0,0,0,0.2); flex-shrink: 0;
}
.unav-ft-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); opacity: 0.65; margin-bottom: 0.6rem; }
.unav-ft-row   { display: flex; align-items: center; gap: 9px; padding: 0.32rem 0; color: rgba(255,255,255,0.58); font-size: 0.74rem; }
.unav-ft-row i { color: var(--gold); width: 13px; text-align: center; font-size: 11px; opacity: 0.85; }
.unav-ft-socials { display: flex; gap: 7px; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); }
.unav-ft-socials a { width: 33px; height: 33px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; transition: all 0.2s; }
.unav-ft-socials a:hover { filter: brightness(1.3); transform: translateY(-2px); }

/* ============================================================
   PANEL ACADÉMICO DERECHO
============================================================ */
.unav-acad-panel {
    position: fixed; top: 0; right: 0;
    width: var(--acad-w); height: 100vh;
    background: rgba(5,12,26,0.98);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    z-index: 995;
    transform: translateX(calc(var(--acad-w) + 10px));
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: -6px 0 40px rgba(0,0,0,0.5);
}
.unav-acad-panel.open { transform: translateX(0); }

.unav-acad-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid rgba(253,185,19,0.2);
    background: rgba(0,0,0,0.25); flex-shrink: 0;
}
.unav-acad-hd-left { display: flex; align-items: center; gap: 10px; }
.unav-acad-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(253,185,19,0.15); border: 1px solid rgba(253,185,19,0.4);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 16px;
}
.unav-acad-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }

.unav-acad-body { flex: 1; overflow-y: auto; padding: 1rem 0; scrollbar-width: thin; scrollbar-color: rgba(253,185,19,0.25) transparent; }
.unav-acad-body::-webkit-scrollbar { width: 3px; }
.unav-acad-body::-webkit-scrollbar-thumb { background: rgba(253,185,19,0.25); border-radius: 2px; }

.unav-acad-sec { padding: 0.9rem 1.4rem 0.3rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); opacity: 0.65; }
.unav-acad-item { border-bottom: 1px solid rgba(255,255,255,0.04); }
.unav-acad-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.82rem 1.4rem; color: rgba(255,255,255,0.82); text-decoration: none;
    font-size: 0.88rem; font-weight: 500; letter-spacing: 0.02em;
    transition: all 0.2s; border-left: 3px solid transparent;
}
.unav-acad-link:hover { color: var(--gold); background: rgba(253,185,19,0.07); border-left-color: var(--gold); }
.unav-acad-link .al-left { display: flex; align-items: center; gap: 12px; }
.unav-acad-link .al-icon  { font-size: 14px; color: var(--gold); opacity: 0.75; width: 18px; text-align: center; }
.unav-acad-link .al-arr   { font-size: 0.7rem; opacity: 0.4; }
.unav-acad-divider { height: 1px; background: rgba(253,185,19,0.12); margin: 0.5rem 1.4rem; }

/* Mini buscador en panel académico */
.unav-acad-search {
    padding: 0.5rem 1.4rem 0.8rem;
}
.unav-acad-search-wrap {
    display: flex;
    border: 1px solid rgba(253,185,19,0.3);
    border-radius: 5px; overflow: hidden;
}
.unav-acad-search-wrap input {
    flex: 1; background: rgba(255,255,255,0.05);
    border: none; outline: none; color: white;
    font-size: 0.82rem; padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
}
.unav-acad-search-wrap input::placeholder { color: rgba(255,255,255,0.35); }
.unav-acad-search-btn {
    background: rgba(253,185,19,0.2); border: none;
    color: var(--gold); padding: 0 0.85rem;
    cursor: pointer; font-size: 13px; transition: background 0.2s;
}
.unav-acad-search-btn:hover { background: rgba(253,185,19,0.35); }

.unav-acad-ft { border-top: 1px solid rgba(253,185,19,0.18); padding: 1rem 1.4rem; flex-shrink: 0; background: rgba(0,0,0,0.2); }
.unav-acad-ft-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); opacity: 0.65; margin-bottom: 0.6rem; }
.unav-acad-ft-row { display: flex; align-items: center; gap: 9px; padding: 0.33rem 0; color: rgba(255,255,255,0.58); font-size: 0.75rem; }
.unav-acad-ft-row i { color: var(--gold); width: 14px; text-align: center; font-size: 11px; opacity: 0.85; }
.unav-acad-socials { display: flex; gap: 7px; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); }
.unav-acad-socials a { width: 33px; height: 33px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; transition: all 0.2s; }
.unav-acad-socials a:hover { filter: brightness(1.3); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE ≤1280px
============================================================ */
@media (max-width: 1280px) {
    .unav-left          { display: none !important; }
    .unav-right         { display: none !important; }
    .unav-ham-btn       { display: flex !important; }
    .unav-mob-acad-btn  { display: flex !important; }
    .unav-topbar        { padding: 0 1.2rem; }
    .unav-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }
}
@media (max-width: 480px) {
    .unav-logo-sub { display: none; }
    .unav-logo-emblem { width: 44px; height: 44px; }
    .unav-logo-name { font-size: 0.64rem; }
}

/* Alpine x-cloak */
[x-cloak] { display: none !important; }
</style>

{{-- ============================================================
     OVERLAYS
============================================================ --}}
<div id="unavDrawerOverlay" class="unav-overlay unav-overlay-drawer"></div>
<div id="unavAcadOverlay"   class="unav-overlay unav-overlay-acad"></div>

{{-- ============================================================
     DRAWER IZQUIERDO
============================================================ --}}
<aside id="unavDrawer" class="unav-drawer" role="navigation" aria-label="Menú lateral">

    <div class="unav-drawer-hd">
        <div class="unav-drawer-logo">
            <div class="unav-drawer-emblem">
                <img src="{{ Voyager::image(setting('site.logo')) }}"
                     alt="{{ setting('site.title', 'Universidad') }}"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                <i class="fas fa-university" style="display:none;"></i>
            </div>
            <div>
                <div class="unav-drawer-inst">{{ setting('site.title', 'Universidad') }}</div>
                <div class="unav-drawer-sub">{{ setting('site.description', 'Institución Educativa') }}</div>
            </div>
        </div>
        <button class="unav-close-btn" id="unavDrawerClose" aria-label="Cerrar menú">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <nav class="unav-drawer-nav">
        <div class="unav-sec-label">Menú principal</div>

        @foreach ($items as $item)
            @if ($item->children->count())
                <div class="unav-d-item">
                    <button class="unav-d-link" data-drawer-toggle>
                        <div class="dl-left">
                            <i class="fas fa-chevron-right dl-icon"></i>
                            {{ $item->title }}
                        </div>
                        <i class="fas fa-chevron-down dl-caret"></i>
                    </button>
                    <div class="unav-d-sub" style="max-height:0; transition:max-height 0.35s ease;">
                        @foreach ($item->children as $child)
                            <a href="{{ $child->link() }}">{{ $child->title }}</a>
                        @endforeach
                    </div>
                </div>
            @else
                <div class="unav-d-item">
                    <a href="{{ $item->link() }}" class="unav-d-link">
                        <div class="dl-left">
                            <i class="fas fa-minus dl-icon" style="font-size:10px;"></i>
                            {{ $item->title }}
                        </div>
                    </a>
                </div>
            @endif
        @endforeach

        <div class="unav-sec-label" style="margin-top:0.4rem;">Académico</div>

        <div class="unav-d-item">
            <a href="{{ setting('site.academic_url', '#') }}" class="unav-d-link">
                <div class="dl-left"><i class="fas fa-book-open dl-icon"></i> Menú Académico</div>
                <i class="fas fa-arrow-right dl-caret" style="font-size:0.7rem;"></i>
            </a>
        </div>
        <div class="unav-d-item">
            <a href="{{ setting('site.intranet_url', '#') }}" class="unav-d-link">
                <div class="dl-left"><i class="fas fa-sign-in-alt dl-icon"></i> Intranet</div>
                <i class="fas fa-arrow-right dl-caret" style="font-size:0.7rem;"></i>
            </a>
        </div>
        <div class="unav-d-item">
            <a href="#" class="unav-d-link" id="unavDrawerSearch">
                <div class="dl-left"><i class="fas fa-search dl-icon"></i> Buscar</div>
            </a>
        </div>
    </nav>

    <div class="unav-drawer-ft">
        <div class="unav-ft-label">Contacto</div>
        <div class="unav-ft-row"><i class="fas fa-phone"></i> {{ setting('site.phone', '(083) 321-000') }}</div>
        <div class="unav-ft-row"><i class="fab fa-whatsapp"></i> {{ setting('site.whatsapp', '+51 983 000 123') }}</div>
        <div class="unav-ft-row"><i class="fas fa-envelope"></i> {{ setting('site.email', 'info@universidad.edu.pe') }}</div>
        <div class="unav-ft-row"><i class="fas fa-map-marker-alt"></i> {{ setting('site.address', 'Abancay, Apurímac') }}</div>
        <div class="unav-ft-socials">
            @if(setting('site.facebook'))
                <a href="{{ setting('site.facebook') }}" target="_blank" class="unav-cs-fb"><i class="fab fa-facebook-f"></i></a>
            @endif
            @if(setting('site.instagram'))
                <a href="{{ setting('site.instagram') }}" target="_blank" class="unav-cs-ig"><i class="fab fa-instagram"></i></a>
            @endif
            @if(setting('site.youtube'))
                <a href="{{ setting('site.youtube') }}" target="_blank" class="unav-cs-yt"><i class="fab fa-youtube"></i></a>
            @endif
            @if(setting('site.twitter'))
                <a href="{{ setting('site.twitter') }}" target="_blank" class="unav-cs-tw"><i class="fab fa-x-twitter"></i></a>
            @endif
        </div>
    </div>
</aside>

{{-- ============================================================
     PANEL ACADÉMICO DERECHO
============================================================ --}}
<aside id="unavAcadPanel" class="unav-acad-panel" role="complementary" aria-label="Panel académico">

    <div class="unav-acad-hd">
        <div class="unav-acad-hd-left">
            <div class="unav-acad-icon"><i class="fas fa-info-circle"></i></div>
            <div class="unav-acad-title">Académico</div>
        </div>
        <button class="unav-close-btn" id="unavAcadClose" aria-label="Cerrar panel académico">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="unav-acad-body">
        <div class="unav-acad-sec">Acceso rápido</div>

        <div class="unav-acad-item">
            <a href="{{ setting('site.academic_url', '#') }}" class="unav-acad-link">
                <div class="al-left"><i class="fas fa-book-open al-icon"></i> Menú Académico</div>
                <i class="fas fa-arrow-right al-arr"></i>
            </a>
        </div>
        <div class="unav-acad-item">
            <a href="{{ setting('site.intranet_url', '#') }}" class="unav-acad-link">
                <div class="al-left"><i class="fas fa-sign-in-alt al-icon"></i> Intranet</div>
                <i class="fas fa-arrow-right al-arr"></i>
            </a>
        </div>

        <div class="unav-acad-divider"></div>
        <div class="unav-acad-sec">Buscar</div>

        <div class="unav-acad-search">
            <div class="unav-acad-search-wrap">
                <input type="text" placeholder="Buscar en el sitio..."
                       onkeydown="if(event.key==='Enter'){ window.location='{{ url('/search') }}?q='+encodeURIComponent(this.value); }">
                <button class="unav-acad-search-btn"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </div>

    <div class="unav-acad-ft">
        <div class="unav-acad-ft-label">Contacto institucional</div>
        <div class="unav-acad-ft-row"><i class="fas fa-phone"></i> {{ setting('site.phone', '(083) 321-000') }}</div>
        <div class="unav-acad-ft-row"><i class="fab fa-whatsapp"></i> {{ setting('site.whatsapp', '+51 983 000 123') }}</div>
        <div class="unav-acad-ft-row"><i class="fas fa-envelope"></i> {{ setting('site.email', 'info@universidad.edu.pe') }}</div>
        <div class="unav-acad-ft-row"><i class="fas fa-map-marker-alt"></i> {{ setting('site.address', 'Abancay, Apurímac') }}</div>
        <div class="unav-acad-socials">
            @if(setting('site.facebook'))
                <a href="{{ setting('site.facebook') }}" target="_blank" class="unav-cs-fb"><i class="fab fa-facebook-f"></i></a>
            @endif
            @if(setting('site.instagram'))
                <a href="{{ setting('site.instagram') }}" target="_blank" class="unav-cs-ig"><i class="fab fa-instagram"></i></a>
            @endif
            @if(setting('site.youtube'))
                <a href="{{ setting('site.youtube') }}" target="_blank" class="unav-cs-yt"><i class="fab fa-youtube"></i></a>
            @endif
            @if(setting('site.twitter'))
                <a href="{{ setting('site.twitter') }}" target="_blank" class="unav-cs-tw"><i class="fab fa-x-twitter"></i></a>
            @endif
        </div>
    </div>
</aside>



{{-- ============================================================
     JAVASCRIPT — Slider + Drawer + Panel académico + Accordions
============================================================ --}}
<script>
(function () {
    /* ---- SLIDER ---- */
    const unavSlides = document.querySelectorAll('.unav-slide');
    const unavDots   = document.querySelectorAll('.unav-dot');
    let   unavCurrent = 0;
    let   unavTimer;

    function unavGoTo(n) {
        unavSlides[unavCurrent].classList.remove('active');
        unavDots[unavCurrent].classList.remove('active');
        unavCurrent = (n + unavSlides.length) % unavSlides.length;
        unavSlides[unavCurrent].classList.add('active');
        unavDots[unavCurrent].classList.add('active');
    }
    function unavChangeSlide(dir) { unavGoTo(unavCurrent + dir); }

    // Exponer globalmente para los onclick inline
    window.unavGoTo        = unavGoTo;
    window.unavChangeSlide = unavChangeSlide;

    function startAuto() { unavTimer = setInterval(() => unavChangeSlide(1), 5500); }
    function stopAuto()  { clearInterval(unavTimer); }

    document.querySelectorAll('.unav-arrow, .unav-dot').forEach(el =>
        el.addEventListener('click', () => { stopAuto(); startAuto(); })
    );
    startAuto();

    /* ---- HELPERS overlay ---- */
    function showOverlay(el) {
        el.classList.add('vis');
        requestAnimationFrame(() => el.classList.add('show'));
    }
    function hideOverlay(el) {
        el.classList.remove('show');
        setTimeout(() => el.classList.remove('vis'), 380);
    }

    /* ---- DRAWER IZQUIERDO ---- */
    const drawer        = document.getElementById('unavDrawer');
    const drawerOverlay = document.getElementById('unavDrawerOverlay');
    const hamBtn        = document.getElementById('unavHamBtn');
    const drawerClose   = document.getElementById('unavDrawerClose');

    function openDrawer() {
        drawer.classList.add('open');
        showOverlay(drawerOverlay);
        hamBtn.setAttribute('aria-expanded', 'true');
        // Animación hamburguesa → X
        const lines = hamBtn.querySelectorAll('.unav-ham-lines span');
        lines[0].style.transform = 'translateY(6.5px) rotate(45deg)';
        lines[1].style.opacity   = '0';
        lines[2].style.transform = 'translateY(-6.5px) rotate(-45deg)';
        hamBtn.style.color  = 'var(--gold)';
        hamBtn.style.borderColor = 'var(--gold)';
        document.body.style.overflow = 'hidden';
    }
    function closeDrawer() {
        drawer.classList.remove('open');
        hideOverlay(drawerOverlay);
        hamBtn.setAttribute('aria-expanded', 'false');
        const lines = hamBtn.querySelectorAll('.unav-ham-lines span');
        lines[0].style.transform = '';
        lines[1].style.opacity   = '';
        lines[2].style.transform = '';
        hamBtn.style.color       = '';
        hamBtn.style.borderColor = '';
        document.body.style.overflow = '';
    }

    hamBtn.addEventListener('click',       e => { e.stopPropagation(); drawer.classList.contains('open') ? closeDrawer() : openDrawer(); });
    drawerClose.addEventListener('click',  e => { e.stopPropagation(); closeDrawer(); });
    drawerOverlay.addEventListener('click',e => { e.stopPropagation(); closeDrawer(); });

    /* ---- PANEL ACADÉMICO DERECHO ---- */
    const acadPanel   = document.getElementById('unavAcadPanel');
    const acadOverlay = document.getElementById('unavAcadOverlay');
    const acadBtnD    = document.getElementById('unavAcadBtn');       // desktop
    const acadBtnM    = document.getElementById('unavMobAcadBtn');    // mobile
    const acadClose   = document.getElementById('unavAcadClose');
    const acadArrowD  = document.getElementById('unavAcadArrow');
    const acadArrowM  = document.getElementById('unavMobAcadArrow');

    function openAcad() {
        acadPanel.classList.add('open');
        showOverlay(acadOverlay);
        [acadBtnD, acadBtnM].forEach(b => { if (b) b.setAttribute('aria-expanded', 'true'); });
        if (acadArrowD) acadArrowD.style.transform = 'rotate(180deg)';
        if (acadArrowM) { acadArrowM.style.transform = 'rotate(180deg)'; acadBtnM.style.color = 'var(--gold)'; acadBtnM.style.borderColor = 'var(--gold)'; }
        document.body.style.overflow = 'hidden';
    }
    function closeAcad() {
        acadPanel.classList.remove('open');
        hideOverlay(acadOverlay);
        [acadBtnD, acadBtnM].forEach(b => { if (b) b.setAttribute('aria-expanded', 'false'); });
        if (acadArrowD) acadArrowD.style.transform = '';
        if (acadArrowM) { acadArrowM.style.transform = ''; acadBtnM.style.color = ''; acadBtnM.style.borderColor = ''; }
        document.body.style.overflow = '';
    }

    if (acadBtnD) acadBtnD.addEventListener('click', e => { e.stopPropagation(); acadPanel.classList.contains('open') ? closeAcad() : openAcad(); });
    if (acadBtnM) acadBtnM.addEventListener('click', e => { e.stopPropagation(); acadPanel.classList.contains('open') ? closeAcad() : openAcad(); });
    if (acadClose)   acadClose.addEventListener('click',   e => { e.stopPropagation(); closeAcad(); });
    if (acadOverlay) acadOverlay.addEventListener('click', e => { e.stopPropagation(); closeAcad(); });

    /* ---- BUSCADOR ---- */
    const searchToggle = document.getElementById('unavSearchToggle');
    const searchBar    = document.getElementById('unavSearchBar');
    const searchInput  = document.getElementById('unavSearchInput');
    if (searchToggle) {
        searchToggle.addEventListener('click', () => {
            const isOpen = searchBar.style.display !== 'none';
            searchBar.style.display = isOpen ? 'none' : 'block';
            if (!isOpen) setTimeout(() => searchInput.focus(), 50);
        });
    }

    /* ---- ACCORDION DRAWER (JS puro, sin Alpine) ---- */
    document.querySelectorAll('[data-drawer-toggle]').forEach(btn => {
        const sub = btn.nextElementSibling;
        if (!sub) return;
        btn.addEventListener('click', () => {
            const isOpen = sub.style.maxHeight && sub.style.maxHeight !== '0px';
            // Cerrar todos
            document.querySelectorAll('[data-drawer-toggle]').forEach(b => {
                const s = b.nextElementSibling;
                if (s) { s.style.maxHeight = '0px'; }
                b.classList.remove('is-open');
            });
            // Abrir el clickeado si estaba cerrado
            if (!isOpen) {
                sub.style.maxHeight = sub.scrollHeight + 'px';
                btn.classList.add('is-open');
            }
        });
    });

    /* ---- ESC cierra todo ---- */
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') {
            closeDrawer();
            closeAcad();
            if (searchBar) searchBar.style.display = 'none';
        }
    });

})();
</script>