/**
 * ARK-IA · Sidebar estilo login (verde metalizado, IA)
 * Solo colores, tipografía y efectos: no altera anchos ni el modo colapsado.
 */
:root {
    --ark-metal: linear-gradient(135deg, #04301e 0%, #0b7a4b 35%, #3fe0a0 50%, #0b7a4b 65%, #04301e 100%);
    --ark-neon: #3fe0a0;
    --ark-mint: #a7f3d0;
    --ark-muted: #8fb5a2;
}
@keyframes arkSheen { to { background-position: 200% center; } }
@keyframes arkPulse { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ---------- Contenedor ---------- */
html body aside#sidebar.sidebar {
    background-color: #04120c !important;
    background-image:
        radial-gradient(260px 220px at 0% 0%, rgba(11,122,75,.55), transparent 70%),
        radial-gradient(240px 260px at 100% 100%, rgba(14,92,63,.45), transparent 70%),
        linear-gradient(rgba(63,224,160,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63,224,160,.06) 1px, transparent 1px) !important;
    background-size: auto, auto, 28px 28px, 28px 28px !important;
    border-right: 1px solid rgba(63,224,160,.18) !important;
    box-shadow: 8px 0 30px rgba(0,0,0,.25);
    font-family: 'Poppins', sans-serif;
}

/* ---------- Marca ---------- */
html body #sidebar .sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(63,224,160,.14) !important;
}
html body #sidebar .sidebar-brand {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    color: #fff !important;
}
html body #sidebar .sidebar-brand i {
    width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ark-metal) !important; background-size: 200% auto !important;
    animation: arkSheen 6s linear infinite;
    color: #fff !important; font-size: .95rem !important;
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 6px 18px rgba(16,185,129,.55);
    margin-right: .55rem !important; flex: 0 0 32px;
}
html body #sidebar .brand-text {
    font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .9rem !important; line-height: 1.15;
    background: linear-gradient(92deg, #a7f3d0, #34d399 40%, #ecfdf5 55%, #34d399 70%, #a7f3d0);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
    animation: arkSheen 5s linear infinite;
}
html body #sidebar .sidebar-collapse-btn,
html body #sidebar .sidebar-toggle {
    background: rgba(63,224,160,.1) !important;
    border: 1px solid rgba(63,224,160,.35) !important;
    color: #6ee7b7 !important;
    border-radius: 8px !important;
    transition: all .25s !important;
}
html body #sidebar .sidebar-collapse-btn:hover,
html body #sidebar .sidebar-toggle:hover {
    background: var(--ark-metal) !important; background-size: 200% auto !important;
    color: #fff !important; box-shadow: 0 4px 14px rgba(16,185,129,.5);
}

/* ---------- Uso mensual (vidrio) ---------- */
html body #sidebar .usage-indicator {
    background: rgba(255,255,255,.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(63,224,160,.28) !important;
    border-radius: 14px !important;
}
html body #sidebar .usage-label {
    font-weight: 700; font-size: .62rem; letter-spacing: 1.5px; text-transform: uppercase; color: #8fd6b4 !important;
}
html body #sidebar .usage-count { color: #fff !important; font-weight: 700 !important; }
html body #sidebar .usage-percentage { color: var(--ark-muted) !important; }
html body #sidebar .usage-indicator .progress {
    background-color: rgba(255,255,255,.08) !important; border-radius: 50px !important; overflow: hidden;
}
html body #sidebar .usage-indicator .progress-bar {
    background-image: linear-gradient(90deg, #0b7a4b, #3fe0a0) !important;
    box-shadow: 0 0 10px rgba(63,224,160,.75);
    border-radius: 50px !important;
    min-width: 3px;
}

/* ---------- Módulos ---------- */
html body #sidebar .sidebar-nav .nav-link {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    letter-spacing: .2px;
    color: #b9d8c8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    border-radius: 12px !important;
    position: relative;
    transition: background .25s ease, color .25s ease, transform .2s ease, border-color .25s ease !important;
}
html body #sidebar .sidebar-nav .nav-link > i:first-child {
    color: #6ee7b7 !important;
    transition: all .25s ease;
}
html body #sidebar:not(.collapsed) .sidebar-nav .nav-link > i:first-child {
    width: 30px !important; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px;
    background: rgba(63,224,160,.08);
    border: 1px solid rgba(63,224,160,.2);
    font-size: .8rem !important;
}
html body #sidebar .sidebar-nav .nav-link:hover {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(63,224,160,.16), rgba(63,224,160,0)) !important;
    border-color: rgba(63,224,160,.22) !important;
    transform: translateX(3px);
}
html body #sidebar .sidebar-nav .nav-link:hover > i:first-child {
    color: #fff !important;
    background: var(--ark-metal); background-size: 200% auto;
    animation: arkSheen 3s linear infinite;
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 4px 14px rgba(16,185,129,.55);
}
html body #sidebar .sidebar-nav .nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(11,122,75,.6), rgba(11,122,75,.12)) !important;
    border-color: rgba(63,224,160,.38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.25);
}
html body #sidebar .sidebar-nav .nav-link.active::before,
html body #sidebar .sidebar-nav .nav-link:hover::before {
    content: ""; position: absolute; left: -9px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
    background: var(--ark-neon); box-shadow: 0 0 12px var(--ark-neon), 0 0 4px var(--ark-neon);
}
html body #sidebar .sidebar-nav .nav-link.active > i:first-child {
    color: #fff !important;
    background: var(--ark-metal); background-size: 200% auto;
    animation: arkSheen 4s linear infinite;
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 4px 14px rgba(16,185,129,.55);
}
html body #sidebar .sidebar-nav .nav-link .fa-chevron-down { color: #5f8f78 !important; font-size: .7rem !important; transition: transform .25s, color .25s !important; }
html body #sidebar .sidebar-nav .nav-link:hover .fa-chevron-down { color: var(--ark-neon) !important; }
html body #sidebar .has-submenu:has(> .submenu.show) > .nav-link { color: #fff !important; background: rgba(63,224,160,.08) !important; border-color: rgba(63,224,160,.2) !important; }

/* ---------- Submenús ---------- */
html body #sidebar .submenu {
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(63,224,160,.14) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px);
}
html body #sidebar .submenu a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: .8rem !important;
    color: #9db8a8 !important;
    border-radius: 9px;
    transition: color .2s, background .2s, padding-left .2s !important;
}
html body #sidebar .submenu a i { color: #5fb894 !important; transition: color .2s; }
html body #sidebar .submenu a:hover,
html body #sidebar .submenu a.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(63,224,160,.16), rgba(63,224,160,0)) !important;
}
html body #sidebar:not(.collapsed) .submenu a:hover { padding-left: 1.6rem !important; }
html body #sidebar .submenu a:hover i,
html body #sidebar .submenu a.active i { color: var(--ark-neon) !important; filter: drop-shadow(0 0 6px rgba(63,224,160,.7)); }

/* Submenú flotante en modo colapsado */
html body #sidebar.collapsed .submenu {
    background: #06190f !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}

/* ---------- Usuario ---------- */
html body #sidebar .sidebar-footer {
    background: rgba(255,255,255,.03) !important;
    border-top: 1px solid rgba(63,224,160,.16) !important;
}
html body #sidebar .user-avatar-sidebar .avatar-img {
    background: #04120c; border-radius: 50%;
    box-shadow: 0 0 0 2px #04120c, 0 0 0 3.5px #3fe0a0, 0 0 14px rgba(63,224,160,.5);
}
html body #sidebar .avatar-status {
    background: #34d399 !important; border-color: #04120c !important;
    animation: arkPulse 2s infinite;
}
html body #sidebar .user-name { font-family: 'Poppins', sans-serif; font-weight: 700 !important; color: #fff !important; }
html body #sidebar .user-email { color: var(--ark-muted) !important; }

/* ---------- Scroll ---------- */
html body #sidebar .sidebar-body { scrollbar-color: rgba(63,224,160,.35) transparent !important; }
html body #sidebar .sidebar-body::-webkit-scrollbar-thumb { background: rgba(63,224,160,.35) !important; }
html body #sidebar .sidebar-body::-webkit-scrollbar-thumb:hover { background: var(--ark-neon) !important; }

@media (prefers-reduced-motion: reduce) {
    html body #sidebar *, html body #sidebar { animation: none !important; transition: none !important; }
}

/* ---------- Ajustes finos ---------- */
html body #sidebar .sidebar-nav .nav-link > span {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #sidebar .sidebar-nav .nav-link .fa-chevron-down { flex: 0 0 auto; margin-left: 6px !important; }
html body #sidebar .usage-header { flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
html body #sidebar .usage-label { letter-spacing: 1px; }
html body #sidebar .usage-count { font-size: .7rem !important; }
html body #sidebar.collapsed .sidebar-brand i {
    margin-right: 0 !important; width: 30px; height: 30px; flex-basis: 30px; font-size: .85rem !important;
}
html body #sidebar.collapsed .sidebar-nav .nav-link:hover { transform: none; }
html body #sidebar.collapsed .sidebar-nav .nav-link::before { left: -4px !important; }