/* Reset e base */

{ margin:0; padding:0; box-sizing:border-box; }

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8fafc;
color: #334155;
line-height:1.6;
}

/* Layout principal */
.app-container { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
width:280px;
background:#1e293b;
color:white;
position:fixed;
height:100vh;
overflow-y:auto;
}
.sidebar-header {
padding:1.5rem;
border-bottom:1px solid rgba(255,255,255,0.1);
}
.sidebar-header h2 {
font-size:1.25rem; font-weight:600;
}
.sidebar-nav ul { list-style:none; padding:1rem 0; }
.nav-link {
display:flex; align-items:center;
padding:0.75rem 1.5rem;
color:rgba(255,255,255,0.7);
text-decoration:none;
border-left:3px solid transparent;
transition:all .2s;
}
.nav-link i { margin-right:0.75rem; width:1.25rem; }
.nav-link:hover { background:rgba(255,255,255,0.1); color:white; }
.nav-link.active {
background:rgba(79,70,229,0.2);
color:white;
border-left-color:#4f46e5;
}

/* Main Content */
.main-content {
flex:1;
margin-left:280px;
padding:2rem;
background:#f8fafc;
}

/* Pages */
.page { display:none; }
.page.active { display:block; }

/* Stats Grid */
.stats-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem;
margin-bottom:2rem;
}
.stat-card {
background:white; padding:1.5rem; border-radius:0.75rem;
box-shadow:0 1px 2px rgba(0,0,0,0.05);
display:flex; align-items:center; gap:1rem;
}
.stat-icon {
width:3rem; height:3rem; display:flex;
align-items:center; justify-content:center;
font-size:1.25rem; border-radius:0.75rem;
}
.success .stat-icon { background:rgba(16,185,129,0.1); color:#10b981; }
.info .stat-icon { background:rgba(59,130,246,0.1); color:#3b82f6; }
.warning .stat-icon { background:rgba(245,158,11,0.1); color:#f59e0b; }
.error .stat-icon { background:rgba(239,68,68,0.1); color:#ef4444; }
.stat-content h3 {
font-size:1.5rem; font-weight:700; margin:0;
}
.stat-content p { font-size:0.875rem; color:#64748b; margin:0; }

/* Tables */
.table-container { overflow-x:auto; }
table {
width:100%; border-collapse:collapse;
}
thead th {
background:#f8fafc; padding:0.75rem 1rem; text-align:left;
font-weight:600; color:#374151; border-bottom:2px solid #e5e7eb;
}
tbody td {
padding:0.75rem 1rem; border-bottom:1px solid #e5e7eb;
color:#334155;
}
tbody tr:hover { background:rgba(79,70,229,0.02); }

/* Status Badge */
.status-badge {
padding:0.25rem 0.75rem; border-radius:9999px;
font-size:0.75rem; font-weight:600; text-transform:uppercase;
}
.status-success { background:rgba(16,185,129,0.1); color:#059669; }
.status-info { background:rgba(59,130,246,0.1); color:#1e3a8a; }
.status-warning { background:rgba(245,158,11,0.1); color:#b45309; }
.status-error { background:rgba(239,68,68,0.1); color:#b91c1c; }

/* Forms */
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:0.5rem; color:#374151; }
.form-group input,
.form-group select { width:100%; padding:0.75rem; border:1px solid #d1d5db; border-radius:0.375rem; }
.form-group input:focus,
.form-group select:focus { outline:none; border-color:#4f46e5; }

/* Buttons */
button {
background:#4f46e5; color:white; padding:0.75rem 1.5rem;
border:none; border-radius:0.375rem; cursor:pointer;
transition:background .2s;
}
button:hover { background:#4338ca; }

/* Responsive */
@media(max-width:768px){
.sidebar { position:relative; width:100%; height:auto; }
.main-content { margin-left:0; padding:1rem; }
.stats-grid { grid-template-columns:1fr; }
}