/* Variables de tema */
:root{
    --bg: #f4f6f9;
    --sidebar-bg: linear-gradient(180deg,#0f1724 0%, #0b3d5b 100%);
    --accent: #2b8cff;
    --accent-2: #00b894;
    --card-bg: #ffffff;
    --muted: #6b7280;
    --text: #0f1724;
    --sidebar-width: 260px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
}
.container{
    display: flex;
    flex-direction: row;
}
/* Sidebar fijo */
.sidebar{
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    z-index: 40;
}
.sistem-title{
    background: rgba(255,255,255,0.06);
    color: #fff;
    padding: 18px 12px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.user-info{ padding: 18px; }
.user-profile{ display:flex; gap:12px; align-items:center; }
.avatar{ width:64px; height:64px; border-radius:12px; overflow:hidden; box-shadow: 0 6px 18px rgba(15,23,36,0.6); background: linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; }
.avatar img{ width:56px; height:56px; border-radius:8px; background:#fff; padding:6px; }
.user-meta{ display:flex; flex-direction:column; }
.user-name{ font-weight:700; font-size:16px; }
.user-role{ font-size:13px; color: rgba(255,255,255,0.8); }

.navigation{ margin-top:18px; padding:8px; overflow:auto; }
.nav-links{ display:flex; flex-direction:column; gap:6px; }
.nav-links li{ list-style:none; }
.nav-links a{ display:block; color:rgba(255,255,255,0.95); text-decoration:none; padding:10px 12px; border-radius:8px; transition:background .18s, transform .12s; font-weight:600; }
.nav-links a:hover{ background: rgba(255,255,255,0.04); transform: translateX(4px); }

/* Main content adjustments */
.main-content{ margin-left: var(--sidebar-width); flex:1; min-height:100vh; }
.header{ position: sticky; top:0; z-index:20; background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom: 1px solid rgba(15,23,36,0.06); }
.left-header{ display:flex; align-items:center; gap:12px; }
.menu-icon{ background:transparent; border:none; font-size:20px; cursor:pointer; padding:8px; border-radius:8px; }
.menu-icon:hover{ background: rgba(15,23,36,0.04); }
.right-header{ display:flex; align-items:center; gap:12px; }
.search-bar{ display:flex; gap:6px; align-items:center; }
.search-input{ padding:8px 10px; border-radius:8px; border:1px solid rgba(15,23,36,0.08); min-width:180px; }
.search-bar button{ background:var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
.icon-btn{ background:transparent; border:0; font-size:18px; cursor:pointer; padding:8px; border-radius:8px; }

.content{ display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; padding:20px; align-items:start; }
.card{ background:var(--card-bg); border-radius:12px; box-shadow:0 6px 24px rgba(15,23,36,0.06); padding:18px; grid-column: span 4; }
.card h2{ margin-bottom:8px; }
.muted{ color:var(--muted); font-size:13px; margin-bottom:8px; }
.card ul{ list-style: none; padding-left:0; color: #334155; }

.card-chart{ grid-column: 1 / -1; height:340px; }
.card-chart canvas{ width:100% !important; height:100% !important; }

/* Responsive adjustments */
@media (max-width: 1000px){
    :root{ --sidebar-width:220px; }
    .card{ grid-column: span 6; }
}
@media (max-width: 700px){
    .sidebar{ transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.collapsed{ transform: translateX(0); }
    .main-content{ margin-left: 0; }
    .card{ grid-column: span 12; }
    .search-input{ min-width:120px; }
}

/* Small visual tweaks */
a.card{ text-decoration:none; color:inherit; }
button:focus{ outline: none; }