/* ═══════════════════════════════════════════════════════════════════
   Menú híbrido EpochSokker (estilo Hustle): barra horizontal global +
   sidebar vertical plegable en vidrio oscuro. Adaptado a Bootstrap 5.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --epk-top-h: 56px;
    --epk-sidebar-w: 240px;
    --epk-sidebar-min: 76px;
    --epk-bg: rgba(13, 11, 22, .94);
    --epk-bg-solid: #0d0b16;
    --epk-accent: #22c55e;
    --epk-linea: rgba(255, 255, 255, .08);
    --epk-texto: #cbd5e1;
}

body { padding-top: var(--epk-top-h); }

/* ── Barra horizontal global ─────────────────────────────────────── */
.epk-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--epk-top-h); z-index: 1045;
    display: flex; align-items: center; gap: .6rem;
    padding: 0 .9rem;
    background: var(--epk-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--epk-linea);
    color: #e5e7eb;
}
.epk-burger {
    background: none; border: 0; color: #f9fafb;
    font-size: 1.1rem; padding: .5rem .65rem;
    border-radius: .5rem; cursor: pointer; line-height: 1;
}
.epk-burger:hover { background: rgba(255, 255, 255, .09); }
.epk-brand {
    color: #fff; font-weight: 800; text-decoration: none;
    letter-spacing: .02em; font-size: 1.05rem; white-space: nowrap;
}
.epk-brand:hover { color: #fff; }
.epk-brand .balon { color: var(--epk-accent); }
.epk-universo {
    font-size: .78rem; color: #a7f3d0;
    background: rgba(34, 197, 94, .13);
    border: 1px solid rgba(34, 197, 94, .3);
    padding: .25rem .65rem; border-radius: 2rem; white-space: nowrap;
}
.epk-toplink {
    color: #e5e7eb; text-decoration: none; font-size: .9rem;
    padding: .4rem .6rem; border-radius: .5rem; white-space: nowrap;
}
.epk-toplink:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.epk-userbtn {
    background: none; border: 0; color: #fff; font-size: .9rem;
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .5rem; border-radius: .5rem;
}
.epk-userbtn:hover { background: rgba(255, 255, 255, .08); }
.epk-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #7c3aed);
    color: #0b1526; font-weight: 800; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.epk-topbar .dropdown-menu { margin-top: .6rem; }

/* ── Sidebar vertical ─────────────────────────────────────────────── */
.epk-sidebar {
    position: fixed; top: var(--epk-top-h); bottom: 0; left: 0;
    width: var(--epk-sidebar-w); z-index: 1040;
    background: rgba(13, 11, 22, .97);
    border-right: 1px solid var(--epk-linea);
    display: flex; flex-direction: column;
    transition: width .2s ease, transform .25s ease;
    overflow: hidden;
}
.epk-sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .6rem .55rem 1rem; }
.epk-sidebar-scroll::-webkit-scrollbar { width: 5px; }
.epk-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }

.epk-group {
    margin: 1.1rem .85rem .3rem;
    font-size: .6rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(167, 139, 250, .8);
    white-space: nowrap;
}
.epk-link {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .58rem .85rem; margin: .12rem 0;
    border-radius: .55rem;
    color: var(--epk-texto); text-decoration: none;
    font-size: .92rem; white-space: nowrap;
    transition: background .15s, color .15s;
}
.epk-link i { font-size: 1.02rem; width: 1.4rem; text-align: center; flex: 0 0 auto; }
.epk-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.epk-link.active { background: rgba(34, 197, 94, .15); color: #fff; font-weight: 600; }
.epk-link.active::before {
    content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--epk-accent);
}
.epk-sidebar-footer {
    border-top: 1px solid var(--epk-linea);
    padding: .65rem .9rem;
    font-size: .66rem; color: rgba(148, 163, 184, .65);
    white-space: nowrap; text-align: center;
}
.epk-sidebar-footer .balon { color: var(--epk-accent); }

/* ── Contenido desplazado ────────────────────────────────────────── */
.epk-content {
    margin-left: var(--epk-sidebar-w);
    transition: margin-left .2s ease;
    min-height: calc(100vh - var(--epk-top-h));
    display: flex; flex-direction: column;
}
.epk-content > footer { margin-top: auto; }

/* ── Móvil: drawer deslizante ────────────────────────────────────── */
.epk-backdrop { display: none; }
@media (max-width: 991.98px) {
    .epk-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
    body.epk-drawer-open .epk-sidebar { transform: translateX(0); }
    .epk-backdrop {
        display: block; position: fixed;
        inset: var(--epk-top-h) 0 0 0;
        background: rgba(0, 0, 0, .55); z-index: 1035;
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    body.epk-drawer-open .epk-backdrop { opacity: 1; pointer-events: auto; }
    .epk-content { margin-left: 0; }
}

/* ── Escritorio: modo colapsado (solo iconos) ─────────────────────── */
@media (min-width: 992px) {
    body.epk-collapsed .epk-sidebar { width: var(--epk-sidebar-min); }
    body.epk-collapsed .epk-content { margin-left: var(--epk-sidebar-min); }
    body.epk-collapsed .epk-link { justify-content: center; padding: .65rem 0; }
    body.epk-collapsed .epk-link i { width: auto; }
    body.epk-collapsed .epk-link span { display: none; }
    body.epk-collapsed .epk-group { text-align: center; letter-spacing: 0; font-size: .68rem; margin-left: 0; margin-right: 0; }
    body.epk-collapsed .epk-sidebar-footer .texto { display: none; }
}


/* ── Modo landing (home pública): sin sidebar ────────────────────── */
body.epk-landing .epk-content { margin-left: 0; }
body.epk-landing .epk-sidebar { display: none; }