body { 
    font-family: 'Inter', sans-serif; 
    background: #f0f2f5; 
    margin: 0; 
}

/* Wrapper para centrar el login en toda la pantalla */
.login-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f2f5;
}

.login-container { 
    width: 350px; 
    padding: 40px; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.login-container h2 { text-align: center; color: #0a0a0a; margin-bottom: 10px; }
.login-container input { padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.login-container button { padding: 12px; background: #C41E3A; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; }
.login-container button:hover { background: #a01830; }

/* Dashboard Layout */
.dashboard-container { display: flex; height: 100vh; }
.sidebar { width: 250px; background: #0a0a0a; color: white; padding: 20px; }
.sidebar h2 { margin-bottom: 30px; color: #C41E3A; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { padding: 15px; cursor: pointer; border-radius: 8px; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
.sidebar li:hover { background: #C41E3A; }
.content { flex: 1; padding: 40px; overflow-y: auto; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
.stat-card { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-left: 5px solid #C41E3A; }
.stat-card h3 { margin: 0 0 10px 0; font-size: 14px; color: #666; text-transform: uppercase; }
.stat-card p { margin: 0; font-size: 28px; font-weight: bold; color: #0a0a0a; }