:root {
    --color-primary: #ff7a00;
    --color-primary-dark: #e06600;
    --color-accent: #6a1b9a;
    --color-accent-soft: #8e39c7;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f5fa;
    --color-border: #e3e3e8;
    --color-text: #2b2b33;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 72px;
    --transition: 0.25s cubic-bezier(.4,.1,.2,1);
    /* Gradiente para sidebar/topbar */
    --gradient-sidebar: linear-gradient(180deg, var(--color-accent) 0%, #4a116d 100%);
}

body { background: var(--color-bg-alt); color: var(--color-text); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; }

/* Sidebar base (desktop) */
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--gradient-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    transition: width var(--transition);
    z-index: 1030;
}
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.sidebar a { color: #f3f0f8; }
.sidebar .sidebar-brand { padding: 1rem 1.25rem; font-weight: 600; letter-spacing: .5px; display: flex; align-items: center; gap: .6rem; }
.logo-icon { background: var(--color-primary); color: #fff; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.logo-text { font-size: 1.1rem; }
.sidebar.collapsed .logo-text { display: none; }
.sidebar-menu { flex-grow: 1; padding: .75rem 0 0; margin: 0; }
.sidebar-heading { font-size: .65rem; text-transform: uppercase; opacity: .6; padding: .75rem 1.25rem .25rem; letter-spacing: 1px; }
.sidebar .nav-link { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.1rem; border-left: 4px solid transparent; font-size: .90rem; white-space: nowrap; transition: background var(--transition), color var(--transition), padding var(--transition), border-color var(--transition); border-radius: 0; position: relative; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active, .sidebar .nav-link[aria-current="page"] { background: rgba(255,255,255,.15); border-left-color: var(--color-primary); font-weight: 600; }
.sidebar.collapsed .nav-link span:not(.icon), .sidebar.collapsed .sidebar-heading { display: none; }
.sidebar-footer { padding: .85rem 1rem; font-size: .7rem; opacity: .7; }

/* Offcanvas móvil: aseguramos stacking correcto sobre backdrop */
.offcanvas.sidebar {
    position: fixed !important;
    top: 0;
    z-index: 1046 !important; /* mayor que backdrop */
    pointer-events: auto;
}
.offcanvas-backdrop { z-index: 1045 !important; }

/* Topbar */
.navbar-top { background: var(--gradient-sidebar); min-height: 56px; display: flex; align-items: center; padding-left: 1rem; padding-right: 1rem; color: #fff; }
.navbar-top .badge.bg-accent { background: var(--color-accent-soft); }
#sidebarToggle { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); color: #fff; }
#sidebarToggle:hover { background: rgba(255,255,255,.28); }

/* Content */
.content-wrapper { min-height: 100vh; background: var(--color-bg-alt); }
.main-content { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Footer */
.footer { background: #ffffff; border-top: 1px solid var(--color-border); }

/* Responsive: no interferir con offcanvas en móvil */
@media (max-width: 992px) {
    .sidebar:not(.offcanvas) {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(0);
        box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
        transition: transform var(--transition), box-shadow var(--transition), width var(--transition);
    }
    .sidebar.hidden { transform: translateX(-100%); box-shadow: none; }
    .content-wrapper { width: 100%; }
}

/* Scrollbar (WebKit) */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

/* Links / accents */
 a { color: var(--color-accent); }
 a:hover { color: var(--color-accent-soft); }

/* Cards */
.card { border: 1px solid var(--color-border); border-radius: .75rem; }
.card-header { background: linear-gradient(90deg,var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; font-weight: 500; }

/* Tables */
table thead { background: var(--color-primary); color: #fff; }
table tbody tr:hover { background: rgba(255,122,0,.06); }

/* Tema para el offcanvas móvil */
.offcanvas.sidebar-theme{
    --bs-offcanvas-width: var(--sidebar-width);
    background: var(--gradient-sidebar);
    color:#fff;
    z-index: 1046;
}
.offcanvas.sidebar-theme .offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.15); }
.offcanvas.sidebar-theme .nav-link{ color:#f3f0f8; }
.offcanvas.sidebar-theme .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.offcanvas.sidebar-theme .sidebar-heading{ color:#e9d5ff; }